網頁設計超值特惠方案 Photoshop做活潑手繪風格網頁設計稿(4)_軟件學園_科技時代

  BODY 部分

  第十一步:卷曲膠帶紙標題

  我們轉到body的內容部分。在這個設計中,世界汽車設計大師和他們的“孩子”,我們要創建2欄和一些圖標。我們使用的是已經有的圖標 因為我們喜歡這種手寫效果包括Handy Icons and Sketchy icons.。在body開始的區域我們要一個標題欄用來羅列我們網站的內容。我們把這個header部分做成卷曲效果。至於說到透明膠帶我們使用的來自 bigstockphoto

  的圖片,後天聽專家講眼鏡學問。為了增加膠帶的深度,我使用矩形選框工具來選擇膠帶的一些區域。在選中選區後我們復制這個圖層按下ALT+SHIFT向左邊移動,然後在向右移動一下使它看起來顯得長一些。為了避免縫隙的產生我們使用圖章工具裡拼合這些縫隙。可以查看下面的效果。

圖23

  第十二步:預覽下的小圖標

  BoxedArt網站的內容區域包含很多網頁模板的預覽。創建這種效果我們需要選中矩形選框工具創 建一個小的矩形,然後使用顏色#123057填充,上海市方達(北京)律師事務所關於中聯重科股份有限公司2016年年度股東大會的法律意見。這些按鈕我們只要復制第一個圖層,移動它到第一個圖層下面,設實這個圖層的透明度這裡我們設實的為 40%。重復同樣的步驟處理余下的按鈕。

圖24

  第十三步:使用針腳線來分開這些區域

  為了分開這些主要的分類,為了創建這些虛線我們可以文字工具角度為90,把這些圖層的樣式設實為疊加,為了使這些顯眼點我們只需復制這個圖層2-3次至於顏色多深取決於你自己。

圖25

  第十四步:填充額外的內容

  添加剩下的內容就非常簡單了,我們只需使用直線工具來分開每個部分,在添加些圖標和文字,這裡我們用到的是一種乾淨的字體Helvetica Condensed,。下圖就是body部分的整體效果了。

圖26

  第十五步:—底部廣告部分

  我們已經到了底部放實廣告部分了,這裡的帶狀條將會再一次應用起來,使用先前有的圖片作為起點,下 一步,我們要使用圓角矩形工具,前景色設實為白色半徑為5px。接著我們需要在設實一些小的圓角矩形,顏色設實為#f8f7f3邊框用深灰。你可以在下圖 的圖層樣式中設實邊框(就是一種描邊效果),網頁設計 台北

圖27

上一頁 1 2 3 4 5 6 下一頁

轉發此文至微博