版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)
文檔簡介
1、第一步為了方便布局,我們將要使用到960s柵格系統(tǒng)(從這里下載)。下載完成后,打開”960_grid_12_col.psd”文件。這個文件的高度小于我們最終的設(shè)計。因此,我們選擇圖像>畫布大小>高度:1558像素。我們傾向于去除”粉色條紋”,如果你想隱藏它,在圖層面板中將圖層可視化關(guān)閉。我們還需要打開標尺和參考線。因此我們將視圖>顯示額外內(nèi)容/標尺/對齊勾選上(這樣元素就便于和我們的參考線對齊了)。第二步我們現(xiàn)在來創(chuàng)建背景。在圖層面板中,右鍵點擊背景圖層,選擇背景圖層,重命名為”bg”。在”bg”圖層上點擊右鍵,選擇”混合選項”,選擇”顏色疊加”,選擇背景色#dbdbdb?,F(xiàn)
2、在選擇”bg”圖層,選擇圖層>新建>圖層命令,重命名為”noise”。現(xiàn)在我們應(yīng)用一個簡單的雜色質(zhì)感,選擇”noise”圖層,將其填充為白色(#ffffff)。選擇濾鏡>雜色>添加雜色>數(shù)量:50%,分布:平均分布。將圖層混合模式更改為:正片疊底,將圖透明度降低為15%。我們來使用矩形工具創(chuàng)建一個柔和的陰影效果。創(chuàng)建一個780×1800像素的矩形,將填充不透明度設(shè)置為0%,在混合選項面板中,設(shè)置投影效果為如下圖片所示:第三步讓我們開始創(chuàng)建頁頭部分。使用矩形工具(u)創(chuàng)建一個780×170像素的矩形,填充為#7db222(你也可以選取其他顏色,整
3、個教程里的顏色都是統(tǒng)一的)。然后設(shè)置如下圖層樣式。第四步現(xiàn)在給頁面增加標題。選取水平文字工具(t),鍵入你的網(wǎng)站名稱,使用如下文字設(shè)置:字體:delicious(下載)大?。?0pt樣式:斜體抗鋸齒設(shè)置:平滑顏色:#ffffff字距:適合視覺字符間距:-50之后給文字應(yīng)用如下圖所示的圖層樣式:現(xiàn)在添加副標題。選取水平文字工具(t),鍵入你的副標題,使用如下文字設(shè)置:字體:delicious(下載)大?。?2pt樣式:斜體抗鋸齒設(shè)置:平滑顏色:無(填充不透明度為0%)字距:適合視覺字符間距:-50之后給文字應(yīng)用投影和顏色疊加,使用如下圖所示的圖層樣式設(shè)置:第五步我們來開始創(chuàng)建區(qū)塊。使用矩形工具(
4、u),創(chuàng)建一個780×360像素大小的矩形,命名為”personal_bg”。打開混合選項面板設(shè)置投影、內(nèi)陰影以及顏色疊加,如下圖所示:第六步下載給我們的個人照片部分創(chuàng)建一個方框。使用矩形工具(u),創(chuàng)建一個220×220像素大小的矩形,填充為#ffffff。給它應(yīng)用如下圖所示的圖層樣式:第七步創(chuàng)建社會性圖標方框,使用圓角矩形工具(u),創(chuàng)建一個45×165像素大小的矩形,半徑:5像素,將其命名為”social box”,填充為#7db222?,F(xiàn)在創(chuàng)建折角。使用同樣的工具創(chuàng)建一個20×20像素大小的矩形,半徑:5像素,命名為”social fold”,將
5、其放置于”personal_bg”圖層的下方。然后按下ctrl+t將其翻轉(zhuǎn)45度?,F(xiàn)在應(yīng)用如下混合選項設(shè)置:第八步現(xiàn)在放置社會性網(wǎng)站圖標。首先下載這些矢量社會性網(wǎng)站圖標,然后如下圖放置五個圖標(24×24像素):第九步現(xiàn)在創(chuàng)建”聯(lián)系”按鈕。使用矩形工具(u),創(chuàng)建一個170×50像素大小的矩形。填充為#7db222,命名為”contact”。選擇此圖層的矢量蒙板,選取”添加錨點工具”,在矩形的左邊中間處創(chuàng)建一個錨點。然后選擇”轉(zhuǎn)換點”工具,在同一錨點處單擊并將其移動到左邊?,F(xiàn)在形狀已經(jīng)完成了,按照慣例,添加如下混合選項效果:現(xiàn)在將”social fold”圖層復(fù)制一遍,命名
6、為”contact fold”(很顯然它必須放置于”personal_bg”圖層的下方)。第十步現(xiàn)在給”聯(lián)系”按鈕添加文字。選取水平文字工具(t),鍵入你的文字,使用如下設(shè)置:字體:delicious(下載)大小:32pt樣式:roman抗鋸齒設(shè)置:平滑顏色:#ffffff字距:適合視覺字符間距:-50然后給文字應(yīng)用如下圖所示的陰影效果:第十一步給區(qū)塊部分添加標題。選取水平文字工具(t),鍵入你的文字,使用如下設(shè)置:字體:delicious(下載)大小:36pt樣式:roman抗鋸齒設(shè)置:平滑顏色:#7db222字距:適合視覺字符間距:-50然后給文字應(yīng)用如下圖所示的陰影和顏色疊加效果:第十二
7、步選取水平文字工具(t),鍵入你的文字,使用如下設(shè)置:字體:delicious(下載)大?。?6pt樣式:roman抗鋸齒設(shè)置:平滑顏色:#7db222(綠色)或者 #a4a6a6(灰色)字距:適合視覺字符間距:-50然后給文字應(yīng)用如下圖所示的陰影和顏色疊加效果:第十三步如同上一步創(chuàng)建區(qū)塊一樣,使用矩形工具(u),創(chuàng)建一個780像素寬,不定高度(取決于內(nèi)容)的矩形,將其命名為”content_bg”,然后將其放置于如下圖所示的”personal_bg”的下方。第十四步為區(qū)塊部分創(chuàng)建標題。選取水平文字工具(t),鍵入你的文字,使用如下設(shè)置:字體:delicious(下載)大?。?6pt樣式:ro
8、man抗鋸齒設(shè)置:平滑顏色:#7db222字距:適合視覺字符間距:-50然后給文字應(yīng)用和”personal details”部分一樣的投影效果:第十五步現(xiàn)在添加第一個副標題。選取水平文字工具(t),鍵入你的文字,使用如下設(shè)置:字體:delicious(下載)大?。?6pt樣式:roman抗鋸齒設(shè)置:平滑顏色:#7db222字距:適合視覺字符間距:-50然后給文字應(yīng)用如下圖所示的投影和顏色疊加效果:第十六步然后添加第二個副標題。選取水平文字工具(t),鍵入你的文字,使用如下設(shè)置:字體:delicious(下載)大小:22pt樣式:斜體抗鋸齒設(shè)置:平滑顏色:#a4a6a6字距:適合視覺字符間距:-
9、50然后給文字應(yīng)用如下圖所示的投影和顏色疊加效果:第十七步最后是內(nèi)容。選取水平文字工具(t),鍵入你的文字,使用如下設(shè)置:字體:helvetica大小:17pt樣式:正??逛忼X設(shè)置:平滑顏色:#7a4a6a6字距:metrics字符間距:-50leading:28pt第十八步現(xiàn)在創(chuàng)建年份圖層。如同”聯(lián)系按鈕”,使用矩形工具(u)創(chuàng)建相同的形狀,但是尺寸為100×36像素。復(fù)制”contact flod”圖層,類似的,創(chuàng)建”year fold”。第十九步現(xiàn)在給按鈕添加年份文字。選取水平文字工具(t),鍵入你的文字,使用如下設(shè)置:字體:delicious(下載)大?。?5pt樣式:rom
10、an抗鋸齒設(shè)置:平滑顏色:#ffffff字距:適合視覺字符間距:-50然后應(yīng)用如”context”文字一樣的投影效果,最終你會得到類似于下圖的效果。第二十步如同上面的步驟一樣,創(chuàng)建一個區(qū)塊。使用矩形工具(u),創(chuàng)建一個780像素寬的矩形,命名為”contact_bg”。使用矩形工具創(chuàng)建最后的條紋部分。創(chuàng)建一個780×15像素大小的矩形,填充為#7db222。第二十一步為區(qū)塊創(chuàng)建標題。選取水平文字工具(t),鍵入你的文字,使用如下設(shè)置:字體:delicious(下載)大?。?6pt樣式:roman抗鋸齒設(shè)置:平滑顏色:#7db222字距:適合視覺字符間距:-50第二十二步現(xiàn)在添加標簽文
11、字。選取水平文字工具(t),鍵入你的文字,使用如下設(shè)置:字體:delicious(下載)大?。?6pt樣式:roman抗鋸齒設(shè)置:平滑顏色:#7db222字距:適合視覺字符間距:-50然后給上面這兩步中的文字應(yīng)用投影效果。第二十三步創(chuàng)建文字輸入?yún)^(qū)域。使用矩形工具(u),創(chuàng)建一個210×33像素大小的矩形,填充為#f4f4f4。打開混合選項面板,應(yīng)用如下圖所示的值:現(xiàn)在使用相同的方法創(chuàng)建所有的文字輸入?yún)^(qū)域,只有右邊的大區(qū)域的尺寸為300×200像素。第二十四步現(xiàn)在創(chuàng)建”發(fā)送信息”按鈕。使用矩形圓角工具(u),創(chuàng)建一個210×33像素大小的矩形,半徑:5像素,填充為#7db222?;旌线x項效果如下圖所示:第二十五步最后,為”發(fā)送信息”按鈕創(chuàng)建文字。選取水平文字工具(t),鍵入你的文字,使用如下設(shè)置:字體:de
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 二零二五年度車輛質(zhì)押貸款合同模板5篇
- 二零二五版白酒市場調(diào)研與分析服務(wù)合同2篇
- 二零二五版便利店區(qū)域代理合作合同范本2篇
- 二零二五年度花卉市場花卉供貨與品牌孵化服務(wù)合同3篇
- 二零二五年環(huán)境監(jiān)測地形圖測繪與污染防控合同3篇
- 二零二五版電影影視基地建設(shè)贊助合同3篇
- 2025版金融機構(gòu)出納人員現(xiàn)金擔保責任合同范本3篇
- 二零二五年建材城商鋪租賃合同環(huán)保及安全責任承諾書3篇
- 二零二五年度民間借貸合同管轄權(quán)變更協(xié)議3篇
- 二零二五年度房地產(chǎn)買賣居間合同模板(含稅費繳納)下載3篇
- 《木蘭詩》第1第2課時示范公開課教學PPT課件【統(tǒng)編人教版七年級語文下冊】
- EGD殺生劑劑化學品安全技術(shù)說明(MSDS)zj
- GB/T 12229-2005通用閥門碳素鋼鑄件技術(shù)條件
- 超分子化學-第三章 陰離子的絡(luò)合主體
- 控制變量法教學課件
- 血壓計保養(yǎng)記錄表
- 食品的售后服務(wù)承諾書范本范文(通用3篇)
- 新外研版九年級上冊(初三)英語全冊教學課件PPT
- 初中中考英語總復(fù)習《代詞動詞連詞數(shù)詞》思維導圖
- 植物和五行關(guān)系解說
- 因式分解法提公因式法公式法
評論
0/150
提交評論