首先這邊我先貼一個(gè)地址：https://www.adobe.com/cn/products/photoshop.html

安裝軟件，這里就不贅述了，真的不會(huì)，可以百度^_^我當(dāng)初就是百度的，哈哈

說(shuō)到PS,作為前端開(kāi)發(fā)的同學(xué)，一點(diǎn)都不陌生

前端需要掌握的PS知識(shí)，也不是很多

針對(duì)頁(yè)面布局，我們前端需要利用PS完成哪些準(zhǔn)備工作呢？

1、我們需要測(cè)量目標(biāo)元素的寬度和高度；

2、我們要知道目標(biāo)元素的字體顏色，背景顏色

3、我們需要知道段落的行高，字符的屬性

4、我們?nèi)绾潍@取指定的圖標(biāo)，獲取圖標(biāo)有啥快捷的方法

打開(kāi)文件（ctrl+o）

圖片和PSD,打開(kāi)有什么不同

我們打開(kāi)圖片的時(shí)候，PS也會(huì)有個(gè)圖層，這個(gè)圖層是背景圖層，會(huì)把這個(gè)圖層給鎖定起來(lái)，我們要編輯的時(shí)候，要先雙擊一下該背景圖層，將背景圖層轉(zhuǎn)換為普通圖層（通常我改的時(shí)候，都會(huì)【Ctrl】+ 【J】）,通過(guò)拷貝建立一個(gè)新圖層，防止誤操作。

我們?cè)诖蜷_(kāi)PSD源文件的時(shí)候，就會(huì)看見(jiàn)好多圖層，我們所看見(jiàn)的設(shè)計(jì)稿，就是由這些圖層疊加上去的。表現(xiàn)這一點(diǎn)，感覺(jué)跟我們熟知的CSS很像。

控制圖層是否顯示 點(diǎn)擊下圖的小眼睛

拿到設(shè)計(jì)稿，我們要大致的確定下，版面的區(qū)域，寬度和高度，這個(gè)時(shí)候我們就要借助選區(qū)工具了

首先我們使用快捷鍵【M】,選取矩形選框工具，此時(shí)我們可以按【F8】使用信息窗口，該窗口會(huì)實(shí)時(shí)顯示被選元素的寬度和高度，這樣我們就輕而易舉的拿到了目標(biāo)元素的寬度和高度。另外的話，取消選框選擇（【Ctrl】+ 【D】），用的也比較多

參考線【Ctrl + H】

使用標(biāo)尺（【Ctrl】+ 【R】）,我們按住鼠標(biāo)左鍵不放，直接拖拽，直到貼合目標(biāo)元素邊緣，再按【M】,切換到矩形選框，我們直接框選被測(cè)元素，就可以獲取到其寬度和高度了

拾色器

拾色器說(shuō)白了，就是獲取顏色的，我們?cè)陂_(kāi)發(fā)的過(guò)程中，往往要涉及到字體顏色、背景色等諸多獲取，拾色器方便快捷的解決了問(wèn)題

抓手工具 【h】

我們利用這個(gè)工具，可以很輕松的拖拽設(shè)計(jì)稿，可以很輕松挪動(dòng)顯示區(qū)域，這個(gè)時(shí)候，我們往往會(huì)借助放大（【Ctrl】+ 【+】或者 【Alt】+ 鼠標(biāo)滾輪）和縮?。ā綜trl】+ 【-】或者 【Alt】+ 鼠標(biāo)滾輪）。

其實(shí)呢，抓手工具除了快捷鍵 【h】呢，我們也可以按住鍵盤(pán)上面的空格，然后按住鼠標(biāo)的左鍵，進(jìn)行拖拽

移動(dòng)工具 【v】

etc. 我們?yōu)榱双@取一個(gè)（目標(biāo)元素），關(guān)鍵的一步，我們要選中它，如何快速的選中圖層或者組，移動(dòng)工具提供了接口，我們可以設(shè)置自動(dòng)選擇，勾選組或者圖層，就可以快速的定位目標(biāo)元素了，對(duì)應(yīng)的切換到了對(duì)應(yīng)的圖層或者組了

既然我們已經(jīng)找到了對(duì)應(yīng)的圖層，我們就可以通過(guò)矩形選框工具【M】，進(jìn)行框選，然后復(fù)制 【Ctrl】 + 【C】 ---> 新建文件 【Ctrl】 + 【N】 ---> 粘貼 【Ctrl】 + 【V】，然后保存為 【Shift】 + 【Ctrl】 + 【S】。

總結(jié)

以上所述是小編給大家介紹的photoshop正確的打開(kāi)方式 ，希望對(duì)大家有所幫助！

最新評(píng)論