當前位置:首頁>ps入門教程>ps基礎教程>工具教程>教程內容

photoshop cc 切片工具教程

來源:設計派 作者:佚名 學習:37674人次

在網(wǎng)頁中處理圖片時,有時會想要加載一個大的圖像,比如頁面上的主圖,或者是背景。如果文件很大,它加載的時候需要的時間就會長,尤其是用戶網(wǎng)速比較慢的時候。你可以通過壓縮來減小文件大小,但是這會使圖像質量受到影響,壓縮文件也要適可而止。因此你需要注意以下幾個問題:一是實際文件的大小;二是分辨率;三是壓縮。

解決這個問題的方法就是把圖片分割,它將允許你在加載圖片的時候可以一片一片地加載,直到整個圖像出現(xiàn)在你的屏幕上。

一、它的使用原理

首先概述下它的工作原理,當你有一個需要花很長時間來加載的大圖像時,你可以使用Photoshop中的切片工具把圖像切成幾個小圖。這些圖像將被作為一個單獨的文件保存,還可以進行優(yōu)化通過保存為中Web所用格式。

此外,Photoshop生成HTML和CSS以便用來顯示切片圖像。在網(wǎng)頁中使用時,圖像通過使用前面提到的HTML或CSS在瀏覽器中重新組合以便達到一個平滑流暢的效果。下面是一個關于圖像切片的例子。

photoshop cc 切片工具教程

二、切片的基礎知識

為了簡單起見,我們只在一個圖上使用切片工具。在這個例子中,我使用的圖片大小為960 x722px。在我們開始之前你需要了解一些知識:

a.在創(chuàng)建切片時,你可以使用切片工具或構建使用層。

b.切片可以選擇使用選擇工具來選中。

c.你可以移動它,設置它的大小,還可以讓切片與其他切片對齊。而且你還可以給切片指定一個名稱,類型和URL。

d.每個切片都可以通過保存時的網(wǎng)頁對話框進行優(yōu)化設置。

按下鍵盤上的C鍵,選中裁剪工具,右鍵選擇切片工具。

photoshop cc 切片工具教程

當您創(chuàng)建切片時,你可以進行如下三個樣式設置:正常,固定長寬比和固定大小。

a.正常:隨意切片,切片的大小和位置取決于你在圖像中所畫的框開始和結束的位置

b.固定長寬比:給高度和寬度設置數(shù)字后,你得到的切片框就會是這個長寬比

c.固定大小:固定設置長和寬的大小

當分割圖像時你會碰到一些選項。如果精確度不那么重要時,你可以手工切片圖像,必要的時候,可以使用切片選擇工具對已完成的切片圖像進行調整。如果精確度很重要,可以使用參考線在圖像上標出重要的位置。

photoshop cc 切片工具教程

在頂部的切片菜單欄,點擊C或切片工具激活它片上面菜單欄圖片,畫好參考線后選擇基于參考線的切片的按鈕。

photoshop cc 切片工具教程

它就會自動為您繪制切片。你還可以使用切片選擇工具重新定位切片。

photoshop cc 切片工具教程

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側二維碼!
  • 關注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
章魚王子、2014-09-07 01:52
五、結論正如您可以看到的,當你有一個大圖片時,圖像分割是非常有用的。通過將它分解成小圖,加載時小圖一個一個加載,讓用戶逐步看到更多。這對于網(wǎng)速慢的用戶很有幫助。

關注大神微博加入>>

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