LOGOPhotoshop平面設(shè)計基礎(chǔ)任務(wù)8.3制作社交類App界面任務(wù)8.3制作社交類App界面2134目錄任務(wù)描述知識技能任務(wù)實(shí)施任務(wù)小結(jié)RENWUMIAOSHUZHISHIJINENGRENWUSHISHIRENWUXIAOJIE任務(wù)描述RENWUSHISHI1任務(wù)描述

街道辦舉辦了“鄰居心聯(lián)心”的系列活動，為了讓鄰居更了解彼此，街道辦委托UI設(shè)計公司設(shè)計一個“鄰居心聯(lián)心”的社交App，社交App的界面設(shè)計需要簡潔、直觀，注重用戶體驗(yàn)和易用性。社交類App界面主要運(yùn)用圖框工具和內(nèi)容識別填充功能處理圖片素材，并利用智能對象功能快速制作和修改頁面效果。最后制作完成社交類App界面，完成效果如圖8-3-1所示。圖8-3-1社交類App界面知識技能ZHISHIJINENG2知識技能-自動摳圖工具學(xué)會利用自動摳圖工具進(jìn)行復(fù)雜圖片，完成簡單的社交App界面。1.智能對象到圖層

智能對象到圖層是指將一個智能對象轉(zhuǎn)換為普通圖層的操作。智能對象被用來嵌入一些元素或文件，例如，嵌入一個矢量圖形、鏈接一個外部文件或嵌入一個調(diào)整圖像的濾鏡效果。通過將智能對象轉(zhuǎn)換為普通圖層，可以對其應(yīng)用更多的編輯和調(diào)整操作，像是使用畫筆、橡皮擦、濾鏡效果或者圖層樣式。將智能對象轉(zhuǎn)換為圖層后，它不再具有智能對象的可編輯性和鏈接性，但可以像對待其他圖層一樣自由地編輯和操作它。這個功能便于對智能對象進(jìn)行更復(fù)雜和精確的處理，同時也提供了更大的靈活性和創(chuàng)意空間。需要注意的是，一旦將智能對象轉(zhuǎn)換為普通圖層，就無法再恢復(fù)為智能對象。2.內(nèi)容識別填充

內(nèi)容識別填充用于自動填充圖像中的選擇區(qū)域，以便刪除、替換或填充內(nèi)容。它基于圖像識別和智能算法，可以自動分析圖像的內(nèi)容，并使用周圍的像素數(shù)據(jù)生成合適的填充結(jié)果。內(nèi)容識別填充的效果取決于圖像的復(fù)雜性和選定區(qū)域的大小。對于簡單和較小的區(qū)域，內(nèi)容識別填充通?？梢蕴峁┏錾慕Y(jié)果。對于復(fù)雜和較大的區(qū)域，可能需要進(jìn)行一些手動的修復(fù)或調(diào)整來使填充結(jié)果更加理想。知識技能-自動摳圖工具3.圖框工具圖框工具是一個為圖形創(chuàng)建占位符圖款的工具，提供了一種快速而簡便的方法來創(chuàng)建圖像框架，并將圖像調(diào)整到框架中。圖框工具可以快速遮蓋圖像，將形狀或文本轉(zhuǎn)換為可用作占位符且可填充圖像的圖框。通過將另一個圖像放置在圖框中，可輕松實(shí)現(xiàn)圖像替換圖像且可自動縮放，以適應(yīng)當(dāng)前的空間。

（1）圖像展示和布局：可以使用圖框工具創(chuàng)建圖像的框架，這對于快速展示設(shè)計想法或進(jìn)行布局非常有用?？梢暂p松繪制和調(diào)整框架的大小和形狀，然后將圖像拖放到框架中?？蚣艿念愋陀袃煞N，一種是矩形，另一種是橢圓形。

（2）響應(yīng)式設(shè)計和多平臺布局：圖框工具可以幫助處理響應(yīng)式設(shè)計和多平臺布局。可以使用不同的框架大小和形狀來模擬不同屏幕尺寸和設(shè)備。這使得在設(shè)計過程中更容易預(yù)覽并調(diào)整布局。

（3）圖像的非破壞性調(diào)整：使用圖框工具，可以對圖像進(jìn)行非破壞性的調(diào)整，如旋轉(zhuǎn)、縮放、翻轉(zhuǎn)等。可以隨時修改和調(diào)整這些調(diào)整，而不會影響原始圖像的像素數(shù)據(jù)。任務(wù)實(shí)施RENWUSHISHI3任務(wù)實(shí)施新建文檔012.制作標(biāo)簽欄023.制作導(dǎo)航欄03制作頁面內(nèi)容04任務(wù)實(shí)施—1.新建文檔01新建文檔新建文檔，選擇“移動設(shè)備”→“iphone8/7/6”，數(shù)值使用默認(rèn)。導(dǎo)入素材“8-3狀態(tài)欄.psd”素材，放置在畫板上方。任務(wù)實(shí)施—2.制作標(biāo)簽欄圖8-1-4圖層面板

圖8-1-5創(chuàng)建矩形數(shù)值

圖8-1-6“返回”圖層效果圖02制作標(biāo)簽欄（1）新建“圖層組”，命名為“標(biāo)簽欄”，單擊“矩形工具”，建立一個寬高為750100像素的矩形，填充矩形顏色為“白色”，選擇矩形添加“描邊”圖層樣式，填充線條顏色為“#e7e7e7”，設(shè)置數(shù)值如圖8-3-3所示，完成后把矩形位置調(diào)整放置在畫板的底部。（2）選擇“圓角矩形”工具，新建一個寬高為12766像素的圓角矩形，設(shè)置四個圓角33像素，填充顏色“#e778f5”，完成后把圓角矩形放置在標(biāo)簽欄中心。導(dǎo)入素材“相機(jī).png”，運(yùn)用“對齊工具”調(diào)整“相機(jī)”位置放置于圓角矩形中心，選擇“相機(jī)”圖層，鼠標(biāo)右擊，執(zhí)行“轉(zhuǎn)換為智能對象”，完成后添加“顏色疊加”圖層樣式，設(shè)置顏色為“#ffffff”，完成效果如圖8-3-4所示。

圖8-3-3社交類App界面

圖8-3-4相機(jī)圖標(biāo)制作任務(wù)實(shí)施—2.制作標(biāo)簽欄圖8-1-4圖層面板

圖8-1-5創(chuàng)建矩形數(shù)值

圖8-1-6“返回”圖層效果圖02制作標(biāo)簽欄（3）導(dǎo)入素材“首頁.png”，選擇“首頁”圖層，鼠標(biāo)右擊執(zhí)行“轉(zhuǎn)換為智能對象”，完成后添加“描邊”圖層效果，填充描邊顏色為“#adadad”，設(shè)置數(shù)值如圖8-3-5所示，扣選“顏色疊加”圖層樣式，添加白色“顏色疊加”效果。參考上述步驟，分別導(dǎo)入“發(fā)現(xiàn).png”、“消息.png”、“我的.png”，把圖標(biāo)轉(zhuǎn)換為能對象后完成圖標(biāo)效果。同時選中4個圖標(biāo)運(yùn)用“對齊工具”執(zhí)行“頂對齊”，完成后，同時選中4個圖標(biāo)和“圓角矩形”圖層，執(zhí)行“垂直居中分布”，最終效果如圖8-3-6所示。圖8-2-5圖標(biāo)圖層樣式設(shè)置

圖8-2-6圖標(biāo)效果任務(wù)實(shí)施—2.制作標(biāo)簽欄圖8-1-4圖層面板

圖8-1-5創(chuàng)建矩形數(shù)值

圖8-1-6“返回”圖層效果圖02制作標(biāo)簽欄（4）單擊“文字工具”，分別輸入文本“首頁”、“發(fā)現(xiàn)”、“消息”、“我的”，完成后把文本圖層放置在圖標(biāo)的下方，運(yùn)用“對齊工具”對齊并分布文字圖層，最終效果如圖8-3-7所示。圖8-3-7標(biāo)簽欄效果任務(wù)實(shí)施—3.制作導(dǎo)航欄

圖8-2-13投影圖層樣式數(shù)值設(shè)置

圖8-2-14大標(biāo)題效果圖03制作導(dǎo)航欄（1）執(zhí)行“視圖”→“新建參考線”，分別再建立一條水平位置為100、200像素，垂直位置為32、508、596、678像素的參考線。（2）新建“圖層組”，命名為“搜索欄”，選擇“搜索欄”圖層組，單擊文字工具，輸入文本“發(fā)現(xiàn)”，創(chuàng)建新文字圖層，調(diào)整文字大小、字體樣式等，設(shè)置數(shù)值如圖8-3-10所示，最后把文字放置在左上方，放置文字的時候，可以參考建立的參考線位置，對準(zhǔn)即可，最終效果如圖8-3-11所示。圖8-2-10字符數(shù)值設(shè)置

圖8-2-11文字對齊效果任務(wù)實(shí)施—3.制作導(dǎo)航欄

圖8-2-13投影圖層樣式數(shù)值設(shè)置

圖8-2-14大標(biāo)題效果圖03制作導(dǎo)航欄（3）導(dǎo)入素材“搜索.png”，鼠標(biāo)右擊執(zhí)行“轉(zhuǎn)換為智能對象”，添加“顏色疊加”圖層樣式，調(diào)整顏色為“#ababab”，完成后同時選擇“發(fā)現(xiàn)”文字圖層和“搜索”圖層，執(zhí)行“垂直居中對齊”，最后選擇“搜索”圖層，對齊到參考線。重復(fù)上一步驟，分別導(dǎo)入“對話.png”和“簽到.png”，調(diào)整位置，完成效果制作。最終效果如圖8-3-12所示。（4）選擇“圓角矩形”工具，創(chuàng)建一個寬高為12960像素，圓角為30像素，顏色為“#faf5fa”的圓角矩形，根據(jù)參考線的位置，調(diào)整圓角矩形的位置。完成后，按快捷鍵<Ctrl+J>再創(chuàng)建3個相同的圓角矩形，其中，選擇其中一個圓角矩形圖層，更改顏色為“#e778f5”，調(diào)整4個圓角矩形的位置，運(yùn)用“對齊工具”對齊分布4個圓角矩形。最后為圓角矩形添加文字內(nèi)容，最終效果如圖8-3-13所示。

圖8-3-12導(dǎo)航欄圖標(biāo)效果

圖8-3-13導(dǎo)航欄效果任務(wù)實(shí)施—4.制作頁面內(nèi)容04制作頁面內(nèi)容（1）新建“圖層組”，命名為“社交分享-1”，單擊“圓角矩形”工具，建立一個寬高為336342像素，圓角為10像素的圓角矩形，選擇圓角矩形鼠標(biāo)右擊，執(zhí)行“轉(zhuǎn)換為圖框”，名稱更改為“圖片分享-1”，完成后拖動素材“圖片分享-1.jpg”置圓角矩形框內(nèi)，調(diào)整“圖框”和“圖片”的位置，完成后如圖8-3-14所示。（2）選擇“圖片分享-1”圖層，在“屬性面板”單擊“編輯內(nèi)容”，選擇“套索工具”，圈起圖片上方“蛋糕”和果醬部分，鼠標(biāo)右擊，執(zhí)行“填充”，選擇“內(nèi)容識別”，重復(fù)執(zhí)行填充“內(nèi)容識別”，快速完成刪除填充圖像，完成后保存圖片，“圖框內(nèi)容”會自動匹配效果，最終效果如圖8-3-15所示。

圖8-3-14圖片素材效果

圖8-3-15圖片處理效果任務(wù)實(shí)施—4.制作頁面內(nèi)容04制作頁面內(nèi)容（3）工具欄單擊，

選擇模式

，創(chuàng)建一個寬高為50像素的圓形圖框，拖動素材“頭像-1”置入圓形圖框中，完成后調(diào)整“圖形圖框”的位置和“素材”的大小、位置。選擇“文字工具”，根據(jù)效果圖所示，分別輸入文本，調(diào)整文字顏色、大小、字體樣式等，最終效果如圖8-3-16所示。圖8-3-16社交分享頁面效果（4）根據(jù)上述步驟，完成其他三個社交分享頁面，最終完成效果如圖8-3-1所示。任務(wù)小結(jié)RENWUSHISHI4任務(wù)小結(jié)使用圖框工具，用戶可以輕松地調(diào)整圖像或頁面元素的位置和大小，而無需實(shí)際修改內(nèi)容。這對于設(shè)計師在進(jìn)行頁面布局時非常有用，因?yàn)樗麄兛梢韵却_定布局中各個元素的位置和比例，然后再填充實(shí)際的內(nèi)容。并通過對“內(nèi)容識別填充”工具快速修改圖片，運(yùn)用智能對象圖層，高效制作，最終完成社交類App界面效果。拓展任務(wù)

利用圖框工具、智能對象圖層、圖形工具等“制作旅游App登陸頁頁面”。效果如圖8-2-17所示。1.新建iphone6/7/8畫板，單擊“圖框工具”，選擇“橢圓”模式，建立一個10281028像素的圖框圖形，把圖片素材“風(fēng)景.jpg”置入到圖框中，調(diào)整素材圖片的大小、位置，完成后根據(jù)效果圖所示調(diào)整圖框的位置。2.新建“圖層組”，命名為“狀態(tài)欄”，選擇“狀態(tài)欄.psd”置入畫板中，添加白色“顏色疊加”圖層樣式，調(diào)整狀態(tài)欄位置。3.制作登陸面板（1）新建“圖層組”，命名為“登陸面板”，單擊“圓角矩形”工具，建立638800像素，顏色為白色的圓角矩形。添加“投影”圖層樣式，分別調(diào)整混合模式為“正片疊底”、顏色為“#dfdfdf”、不透明度為“90%”、距離為“10像素”和大小為“40像素”。（2）選擇“圓角矩形”工具，建立一個寬高為56288像素，圓角為14像素，顏色為“#f8f8f8”的圓角矩形，按快捷鍵<ctrl+J>拷貝“圓角矩形”圖層，調(diào)整兩個圖形位置。完成后，置入圖片素材“密碼.png”和“個人.png”,分別添加圖層樣式“顏色疊加”，調(diào)整顏色為“#556ed7”。最后，為圓角矩形添加文字內(nèi)容，調(diào)整文字顏色、大小、樣式等。（3）單擊“矩形工具”，新建一個寬高56288像素，圓角為44像素的圓角矩形。選擇“圓角矩形”圖層，添加“漸變疊加”的圖層樣式，調(diào)整”#4e54c8”到“#5b86e5”的漸變，并調(diào)整漸變角度。完成后運(yùn)用“文字工具”添加文字內(nèi)容，調(diào)整文字顏色、大小、樣式等。（4）新建“圖層組”，命名為“第三方賬號登陸”，選擇“矩形工具”，在圖層組內(nèi)創(chuàng)建寬高為1461.5像素,顏色為“#b3b8d3”的矩形，<Ctrl+J>拷貝圖層，調(diào)