Photoshop基礎教程:製作網頁設計中的虛線

來源:互聯網
上載者:User

網頁設計中,虛線是必不可少的修飾效果,例如地區描邊,新聞列表文字底線等等,雖然有很多種在Photoshop裡繪製虛線的方法,還有人每次都在Illustrator裡畫好然後再轉到PS裡,但繪製方式不是繁瑣就是弄得虛線朦朦朧朧的,看起來一點也不精緻精細,那麼,在Photoshop中畫虛線,究竟有沒有簡單點的且一勞永逸的辦法呢?

去問百度,會得到N種方法,但這裡給大家介紹的,是幾種即快速又準確且非常精緻的方法。對於精細的網頁設計而言,如果用到了虛線,那麼它的精細度對效果影響很大,做的好了,就能帶來意想不到的效果,廢話不多說了,下面就詳細配圖給大家介紹幾種網頁設計中常用的Photoshop虛線畫法。

1、Photoshop中繪製直線虛線的方法

在網頁模型或效果圖中,直線型的虛線用的很多,例如橫向分割和豎向分割,大致分為點劃線(dotted)和虛線(dashed),如下圖:

做這樣的線非常簡單,我們只用到Photoshop(PS)中的文字工具即可類比出來,設定如下:

如果你的線是豎著的,只需要把圖層旋轉90度即可,這樣做,是不是即方便又快速,而且外觀精緻?

2、Photoshop(PS)中繪製直角矩形邊框的方法

如果你不僅僅畫直線,還需要對矩形的外邊框添加虛線,可以這麼做。

首先,是點劃線(dotted),需要建立一個2×2像素的白底檔案,按Ctrl+0把畫布放到最大,不用建立圖層,直接在畫布中錯格填充,如下圖:

接著,按Ctrl+A全選此圖案,點擊PS的頂部菜單 編輯->定義圖案 命令,將此圖定義為一個圖案。

接著,在你需要添加點劃線的直角方框(注意:一定是直角,不是圓角矩形也不是圓形)的圖層雙擊,調出來圖層樣式視窗,選擇最後一項描邊,按下圖設定:

這個時候,邊線是黑白交替的,你肯定有的時候需要白色,有的時候需要黑色,你可以這麼做:

需要黑色時,將描邊的混合模式設定為正片疊底,白色就被濾掉了。

需要白色時,描邊的混合模式設定為濾色,過濾掉黑色。

這樣一個1px的點劃線邊框就做好了,可以很方便的進行多次複用,ps留個這樣的圖案非常方便。

如果你需要虛線,那麼很簡單,你只需要把描邊的圖案做的尺寸大點即可,我一般是做個4×4的圖案,效果如下:

如果還需要更大的虛線,各位同學自行調整圖案尺寸即可。

3、Photoshop(PS)中繪製圓角矩形的虛線邊框的方法

新的css3標準是支援矩形圓角的,如果類比這樣的圓角矩形虛線邊框,那麼上面的方法就不太適用了,怎麼辦呢,其實很簡單,你只需要把填充的圖案改為圓形格子即可,最小的尺寸為4×4像素,如下圖:

基本類比的八九不離十了,嘿嘿~

4×4像素本身非常小,想要畫一個可識別的圓圈非常困難,畫圓的意義在於用圓的羽化邊緣使類比的圓角邊緣不那麼硬。因此,只需要用圓形選區工具畫一個錯格的4×4映像即可,記著要選中“消除鋸齒”選項。如果你覺得還是困難,可以把4×4改成6×6或者8×8,依此類推。

4、Photoshop(PS)中繪製特殊形狀的虛線邊框的方法

各位同學,如果你需要給特殊形狀的圖形添加虛線邊框,那麼我建議你還是在Illustrator裡畫好再匯入Photoshop吧,或者直接使用網頁設計的專用軟體——Fireworks,因為上邊的方法只適用於網頁設計中的結構圖形設計,而不是做專題或者banner之類的造型設計了,正所謂術業有專攻哇!



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。