如何快速的掌握改稿技巧(3)

來源:優(yōu)設(shè) 作者:情非得已 學(xué)習(xí):5621人次

在我們每天實(shí)際的視覺設(shè)計(jì)工作中,總有許多零碎與重復(fù)性的工作占據(jù)了我們很大一部分寶貴的工作時(shí)間,我們應(yīng)當(dāng)用有限的時(shí)間投入到無限的設(shè)計(jì)工作當(dāng)中去(…-_-) 。零碎與重復(fù)性的工作就應(yīng)該快速有效的解決掉,把時(shí)間放在重點(diǎn)的、有創(chuàng)造性的工作當(dāng)中去,這方面的理論有很多啦,時(shí)間管理、項(xiàng)目管理等,咱們先跳過,來點(diǎn)直接的。

視覺設(shè)計(jì)師99%都會(huì)用到PS,PS有幾個(gè)簡(jiǎn)單但是很有效的工具大家可能都忽略了。

案例1:再畫一個(gè)按鈕?

Photoshop技巧:如何快速的掌握改稿技巧,PS教程,16xx8.com教程網(wǎng)

在平臺(tái)型站點(diǎn)中為了視覺的統(tǒng)一,按鈕的顏色、描邊、投影通常都是一樣的。如果這個(gè)按鈕已經(jīng)設(shè)計(jì)OK了,如果我們?cè)诹硪粋(gè)設(shè)計(jì)中需要再做一個(gè)怎么辦呢?

方法A:重新再畫一個(gè)。 花1-2分鐘,而且還不能保證顏色和樣式和之前的一模一樣。該方法效率最低不可取。

方法B:找到之前的PSD,復(fù)制過來。 這個(gè)方法可能是用的最多的。但是每次要想這個(gè)按鈕在哪個(gè)設(shè)計(jì)稿中用過?而且PSD放哪里了?打開一個(gè)PSD,再?gòu)?fù)制過來,也是需要花費(fèi)不少時(shí)間的。

方法C:把按鈕的“樣式”保存下來,直接調(diào)用。

1. 該類型的按鈕一般是用樣式直接設(shè)計(jì)的,點(diǎn)擊右鍵“拷貝圖層樣式”。

Photoshop技巧:如何快速的掌握改稿技巧,PS教程,16xx8.com教程網(wǎng)

2. 在樣式面板的空白處點(diǎn)擊新建一個(gè)樣式就OK了。以后想用哪個(gè)點(diǎn)哪里,so easy!做重復(fù)設(shè)計(jì)的時(shí)候再也不傷腦經(jīng)了。

Photoshop技巧:如何快速的掌握改稿技巧,PS教程,16xx8.com教程網(wǎng)

Photoshop技巧:如何快速的掌握改稿技巧,PS教程,16xx8.com教程網(wǎng)

舉一反三:

一個(gè)站點(diǎn)中的文字、邊框的顏色一般也是固定幾個(gè)顏色的。該怎么做,你懂得。

統(tǒng)一調(diào)用PS中的“樣式”的優(yōu)點(diǎn):

1. 加快工作效率。

2. 同時(shí)保證視覺的一致性,利于品牌的規(guī)范。

案例2:修改頁面中的正文宋體的顏色

Photoshop技巧:如何快速的掌握改稿技巧,PS教程,16xx8.com教程網(wǎng)

比如把頁面中的所有的#333333的文字顏色改成#666666,這種小問題在版本迭代中經(jīng)常遇到。

方法A:找出頁面的PSD,選中每個(gè)文字圖層改顏色~~ OMG,想起來都是很痛苦的事情(納尼?!你每次都這么干的嗎?)

方法B:直接用選區(qū)工具選取顏色修改。

具體操作:

1. 選擇魔術(shù)棒工具(快捷鍵是“W”),參數(shù)如下

Photoshop技巧:如何快速的掌握改稿技巧,PS教程,16xx8.com教程網(wǎng)

2. 對(duì)準(zhǔn)#333333的文字點(diǎn)擊左鍵,OK,頁面中所有的#333333的文字都被你選中了,你可以改顏色了。

Photoshop技巧:如何快速的掌握改稿技巧,PS教程,16xx8.com教程網(wǎng)

方法C:終極大法 直接用瀏覽器改文字顏色吧!

這招是向重構(gòu)同學(xué)學(xué)習(xí)的,所謂“藝多不壓身” 嘛,我認(rèn)為網(wǎng)頁視覺還是需要掌握一定的CSS知識(shí),對(duì)工作很有幫助。 具體操作,推薦使用Chrome瀏覽器。

1. 選中需要修改的文字,右鍵“審查元素”

Photoshop技巧:如何快速的掌握改稿技巧,PS教程,16xx8.com教程網(wǎng)

2.下面藍(lán)色的是你選中文字的html代碼,右邊的是CSS代碼,看到color:#333沒有?可以直接改顏色了,改完頁面會(huì)直接刷新,然后截圖就OK了。

Photoshop技巧:如何快速的掌握改稿技巧,PS教程,16xx8.com教程網(wǎng)

這招適合已經(jīng)上線的站點(diǎn)做迭代時(shí)的設(shè)計(jì),某個(gè)模塊需要修改文字顏色時(shí),完全不必用PS打字分層來增加工作量。完成之后再截圖放入PS中調(diào)整即可,本人屢試不爽強(qiáng)烈推薦。

案例3:利用chrome解決簡(jiǎn)單的布局調(diào)整。

例如:要把上面的板塊增加一列,從一行8個(gè)圖,增加到一行9個(gè)圖。很簡(jiǎn)單的問題。

Photoshop技巧:如何快速的掌握改稿技巧,PS教程,16xx8.com教程網(wǎng)

用PS操作無疑比較繁瑣,選中每個(gè)圖層再操作,而且圖片都沒分層的話,就慢慢一個(gè)一個(gè)像素移吧,而且移得不一定準(zhǔn),這對(duì)我這種像素對(duì)齊控來說,無疑是很痛苦的事情。 但用chrome的這個(gè)調(diào)試功能就舒服得多了,改改數(shù)字就好,上面的效果輕松搞定。而且媽媽再也不用擔(dān)心你像素對(duì)不齊了。

Photoshop技巧:如何快速的掌握改稿技巧,PS教程,16xx8.com教程網(wǎng)

該方法要求設(shè)計(jì)師能看懂HTML和CSS代碼,這些并不困難,如果肯花一天的時(shí)間,寫可能還寫不好,但咱改還是能改的。

案例4:PS“動(dòng)作”功能的充分利用

Photoshop技巧:如何快速的掌握改稿技巧,PS教程,16xx8.com教程網(wǎng)

懶人才是推動(dòng)整個(gè)世界進(jìn)步的先驅(qū)。如上圖所示,我已經(jīng)把我最重復(fù)干的事編寫成了動(dòng)作。我再也不用因?yàn)橥薼ogo放在哪里而發(fā)愁了(從動(dòng)作列表中可以看到我有多健忘了。)

例如點(diǎn)擊“常用頁面元素”后:

Photoshop技巧:如何快速的掌握改稿技巧,PS教程,16xx8.com教程網(wǎng)

PS會(huì)自動(dòng)打開硬盤中我已經(jīng)整理好的PSD,里面有經(jīng)常用到的表單元素。這些都是已經(jīng)扣好的圖片,不用每次再臨時(shí)去截圖浪費(fèi)時(shí)間。

案例5:畫表格!PS的噩夢(mèng)

Photoshop技巧:如何快速的掌握改稿技巧,PS教程,16xx8.com教程網(wǎng)

每次用PS畫表格,腦子里都是滿滿的郁悶的回憶吧。的確,PS不擅長(zhǎng)這類工作,效率和效果都很不理想。專業(yè)的事情還是交給專業(yè)的工具來做吧,推薦使用PS的好兄弟、重構(gòu)同學(xué)的好基友——Dreamweaver。 DW畫表格我覺得比word還是要方便的。一些漸變等質(zhì)感,可以截圖到PS里面再調(diào)整。

好處有3個(gè):

1. 效率提升 這個(gè)不用說了,誰用誰知道哇。

2. 擴(kuò)展性好 如上圖所示,您花了一個(gè)上午好容易在PS里把上面的表格排整齊了,產(chǎn)品MM說不好意思,我要在中間加2列內(nèi)容~~~想哭嗎?用了DW后,來,隨便插吧。

3.用DW畫好表格后,重構(gòu)同學(xué)也不用再花時(shí)間去寫頁面表格結(jié)構(gòu)了。

這么好的事情,一石三鳥,何樂而不為呢?

以上一些不成熟的小伎倆希望拋磚引玉,祝大家都能快起來!

 

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
MENGLIN2016-08-01 04:10
很好很強(qiáng)大,代碼不懂

關(guān)注大神微博加入>>

網(wǎng)友求助,請(qǐng)回答!