ps設(shè)計(jì)淘寶店招圖片(4)

最近略忙 =3= 更新有點(diǎn)慢。主要最近在做一個(gè)商城的裝修 還有六一嘉年華的各種活動(dòng)專題裝修 =3= 忙死我了。。。。今天我也是拿這家的店招來(lái)教大家怎么自己去做一個(gè)店招。這家店的名字叫 棉棉柔 。大家可以進(jìn)去看看效果。

開頭得給大家說(shuō)一個(gè)問(wèn)題。很多人不知道怎么自定義自家的店招，因?yàn)橛袀�(gè)系統(tǒng)自帶的導(dǎo)航，而系統(tǒng)自帶的不能刪。很多人會(huì)說(shuō)，喵了個(gè)咪！其實(shí)你只要把店招上面的那個(gè)高度從120px調(diào)整到150px，那個(gè)系統(tǒng)自帶的導(dǎo)航就會(huì)自動(dòng)隱藏的了 =3= （那個(gè)地方就是你到店鋪裝修-首頁(yè)-對(duì)著店招點(diǎn)雙擊，然后你自己找到 【120px高度】 這個(gè)設(shè)置。然后手動(dòng)改成150px點(diǎn)擊保存，然后系統(tǒng)自帶的就會(huì)自己跑到下面，發(fā)布后是隱藏的）。

首先，我們看看店招完成效果：

寬是1920px 高是150px 中間的寬度是990px 導(dǎo)航寬度是30px 導(dǎo)航字體12px 最好用黑體

如果你的老板叫你設(shè)計(jì)一個(gè)店招你會(huì)直接新建一個(gè)1920*150PX的PSD文件去設(shè)計(jì)嗎？ 我告訴你，千萬(wàn)別這樣搞。雖然店招很小，但他也是我們店鋪中最主要的一塊，而且，店招也覺(jué)得你整體的風(fēng)格。所以，我們需要整體的設(shè)計(jì)。如下圖：

這里想到最近有個(gè)美工跟我聊天，他發(fā)現(xiàn)我做的圖，模特都有修圖。他問(wèn)“如果我不修圖，那么你老板會(huì)怎樣？” 我說(shuō)“沒(méi)神馬阿，他本來(lái)壓根就不知道要修圖的” 他說(shuō)，“那么你不是給自己找麻煩嗎” 我說(shuō)，“那就是態(tài)度問(wèn)題了” 其實(shí)，很多時(shí)候，美工做不好圖，就是怕找麻煩。很多時(shí)候，設(shè)計(jì)的好壞是你的態(tài)度決定的。還有，大家記住一句話：你現(xiàn)在幫這個(gè)老板做的事，是做給下一個(gè)老板看的。 只要你在某一個(gè)項(xiàng)目，某一件事，某一個(gè)設(shè)計(jì)，做得漂亮了，下一個(gè)老板給你的工資，呵呵，你懂的。到時(shí)都不是你去找工作了，是人家來(lái)找你了。

我的這個(gè)店招是跟海報(bào)融在一起的，這樣首頁(yè)看起來(lái)更加大氣。這里可能有人會(huì)問(wèn)怎么知道中間990px（或者950）是怎么在PS確定的？很簡(jiǎn)單，新建一個(gè)990*500的PS文件，然后把這個(gè)990的圖層拉到1920這里，990的圖層與1920的背景圖對(duì)齊就OK了。 其他的店招 導(dǎo)航等等按照這個(gè)方法在PS確定位置就OK了，然后用標(biāo)尺拉好。如下圖：

然后把整體的大體效果畫出來(lái) （這個(gè)很簡(jiǎn)單，一層淺淺的藍(lán)色背景，然后用柔和的畫筆，用10%的不透明度，然后用無(wú)敵亂畫法就可以把這個(gè)效果畫出來(lái)了。）

然后加上導(dǎo)航條（通常導(dǎo)航條就是我們整個(gè)頁(yè)面的主色調(diào)了，所以這個(gè)不能亂來(lái)喲）。用云的形狀弄一個(gè)擺放logo的地方。這個(gè)用來(lái)擺放logo的東西用三四個(gè)圓形就可以做出來(lái)的了。

然后去網(wǎng)上找氣球，摳下來(lái)。放到收藏那邊。

然后告訴你 =3= 放上LOGO跟打上導(dǎo)航的字就完事了。。。下面復(fù)雜的是怎么做鏈接了。（導(dǎo)航字體一般用黑體 12PX 超過(guò)了12PX這個(gè)大小，字體就會(huì)顯得很不專業(yè)）

首先你要調(diào)回店招大小的圖片，點(diǎn)擊 圖像-畫布大小 如下圖設(shè)置：

中間的那個(gè)定位記得點(diǎn)一下。你點(diǎn)兩次就知道這個(gè)定位干嘛用的了=3=

把想切的地方用那個(gè)標(biāo)尺拉好。然后用切片工具切成如下圖：

其實(shí)你也可以整張圖片保存好在DW里面做熱點(diǎn)。但是我的店招要弄搜索欄。有時(shí)候有個(gè)地方要改，所以我還是比較喜歡切片。而且旗艦店的要做關(guān)注的鏈接。 切片后，導(dǎo)航也可以把一些按鈕換成GIF的，這樣的店招就可以一閃一閃的（詳情搜索淘寶店鋪 愛予寶 的那個(gè)店招）。

如果怕切不好，請(qǐng)下載FW來(lái)切片。 PS或者FW切片后，如果切片復(fù)雜，都是會(huì)有個(gè)【分隔符】的圖片。這個(gè)圖片是沒(méi)有像素的圖片，目的是穩(wěn)定表格，這個(gè)分隔符需要在代碼里面加進(jìn)去的。如果你用div來(lái)做的布局，就不用這個(gè)分隔符。（注：div是一種代碼的層）

切好片之后按 ctrl+shift+alt+s 保存 要把圖片和html都保存下來(lái) 如下圖

然后繼續(xù)在PS里面把店招恢復(fù)回1920*150的大小。在店招中間部分加一層白色（如下圖），這個(gè)步驟是制作店招的背景的，目的是減少背景的KB數(shù)（大小）。然后把這個(gè)圖片整張保存下來(lái)就OK了。

下面簡(jiǎn)單說(shuō)說(shuō)DW大家就會(huì)懂的了，DW很簡(jiǎn)單的。 打開DW，把剛剛切片出來(lái)的那個(gè)html直接拉到DW里面。然后大家看下圖：

完成上面的步驟之后，其實(shí)就基本完成的了。但是很多人這樣做完后放到店招上面還是亂的。為啥呢？我來(lái)教大家一招，首先在DW的代碼模式下，用光標(biāo)選定 <img 然后點(diǎn)擊編輯 點(diǎn)擊查找和替換 如下圖

最后就是把制作好的背景也傳上去就OK的啦。

制作教程不容易。希望大家多多關(guān)注我。有神馬不懂的盡管留言。謝謝。