ps切片工具怎么用?詳細解析ps切片工具切圖技巧

ps切片工具怎么用?切片工具對于網(wǎng)站的美工和淘寶美工都非常的重要,本教程就向大家介紹ps切片工具切圖技巧,教程比較實用,對于初學PS朋友很有幫助。推薦給大家,希望對大家有所幫助!
在網(wǎng)頁中處理圖片時,有時會想要加載一個大的圖像,比如頁面上的主圖,或者是背景。如果文件很大,它加載的時候需要的時間就會長,尤其是用戶網(wǎng)速比較慢的時候。你可以通過壓縮來減小文件大小,但是這會使圖像質(zhì)量受到影響,壓縮文件也要適可而止。因此你需要注意以下幾個問題:一是實際文件的大小;二是分辨率;三是壓縮。
解決這個問題的方法就是把圖片分割,它將允許你在加載圖片的時候可以一片一片地加載,直到整個圖像出現(xiàn)在你的屏幕上。
一、它的使用原理
首先概述下它的工作原理,當你有一個需要花很長時間來加載的大圖像時,你可以使用Photoshop中的切片工具把圖像切成幾個小圖。這些圖像將被作為一個單獨的文件保存,還可以進行優(yōu)化通過保存為中Web所用格式。
此外,Photoshop生成HTML和CSS以便用來顯示切片圖像。在網(wǎng)頁中使用時,圖像通過使用前面提到的HTML或CSS在瀏覽器中重新組合以便達到一個平滑流暢的效果。下面是一個關(guān)于圖像切片的例子。
二、切片的基礎(chǔ)知識
為了簡單起見,我們只在一個圖上使用切片工具。在這個例子中,我使用的圖片大小為960 x722px。在我們開始之前你需要了解一些知識:
a.在創(chuàng)建切片時,你可以使用切片工具或構(gòu)建使用層。
b.切片可以選擇使用選擇工具來選中。
c.你可以移動它,設(shè)置它的大小,還可以讓切片與其他切片對齊。而且你還可以給切片指定一個名稱,類型和URL。
d.每個切片都可以通過保存時的網(wǎng)頁對話框進行優(yōu)化設(shè)置。
按下鍵盤上的C鍵,選中裁剪工具,右鍵選擇切片工具。
當您創(chuàng)建切片時,你可以進行如下三個樣式設(shè)置:正常,固定長寬比和固定大小。
a.正常:隨意切片,切片的大小和位置取決于你在圖像中所畫的框開始和結(jié)束的位置
b.固定長寬比:給高度和寬度設(shè)置數(shù)字后,你得到的切片框就會是這個長寬比
c.固定大小:固定設(shè)置長和寬的大小
當分割圖像時你會碰到一些選項。如果精確度不那么重要時,你可以手工切片圖像,必要的時候,可以使用切片選擇工具對已完成的切片圖像進行調(diào)整。如果精確度很重要,可以使用參考線在圖像上標出重要的位置。
在頂部的切片菜單欄,點擊C或切片工具激活它片上面菜單欄圖片,畫好參考線后選擇基于參考線的切片的按鈕。
它就會自動為您繪制切片。你還可以使用切片選擇工具重新定位切片。
三、編輯切片信息
創(chuàng)建切片之后,您可以編輯切片信息通過以下兩種方式中的任一種。一種要做的就是點擊切片選擇工具,單擊你想編輯的切片,然后點擊菜單欄中>為當前切片設(shè)置選項的按鈕。
另一個選擇是右鍵單擊切片,在彈出的菜單中,選擇編輯切片選項。
兩種選擇都將彈出如下的切片選項對話框。
正如您所看到的,對話框里有許多設(shè)置。
a.切片名稱:打開網(wǎng)頁之后顯示的名稱
b.URL:點擊這個被編輯的圖片區(qū)域后,會跳到你輸入的目標網(wǎng)址內(nèi)
c.目標:指定載入的URL幀原窗口打開,表示是在還是在新窗口打開鏈接
d.消息文本:鼠標移到這個塊時瀏覽器左下角顯示的內(nèi)容
e.Alt標記:圖片的屬性標記,鼠標移動到這塊時鼠標旁的文本信息
f.切片的尺寸:設(shè)置塊的x、y軸坐標,W、H的精確大小
四、保存網(wǎng)頁
一旦你滿意你的布局后,選擇文件>存儲為Web所用格式,保存圖片。
在這里,您可以為切片設(shè)置文件類型或者使用網(wǎng)頁對話框中列出默認設(shè)置。完成設(shè)置后,單擊存儲按鈕。
這時會彈出一個存儲優(yōu)化結(jié)果的對話框,底部的對話框是幾個重要的設(shè)置。
a.格式:你有三個選擇,分別是HTML和圖像,僅限圖像和僅限HTML。
b.設(shè)置:您選擇自定,背景圖像,默認設(shè)置,XHTML和其他。
c.切片:所有切片,所有用戶切片和選中切片。
對于本教程我使用的是HTML和圖像(一般都這么保存),默認設(shè)置和所有切片。完成設(shè)置后,選擇您想要保存文件的文件夾,并單擊保存按鈕。這時會創(chuàng)建一個HTML文件和一個包含六個圖像文件,它們在同一個大文件夾中。
這是一個在Adobe Dreamweaver中的分區(qū)屏幕的HTML文件。你可以看到,代碼很簡單也很好用。
五、結(jié)論
正如您可以看到的,當你有一個大圖片時,圖像分割是非常有用的。通過將它分解成小圖,加載時小圖一個一個加載,讓用戶逐步看到更多。這對于網(wǎng)速慢的用戶很有幫助。
以上就是ps切片工具切圖技巧解析,希望這篇教程對大家有所幫助
相關(guān)文章
psd文件用什么打開? 沒有Photoshop的情況下打開psd文件的四種方法
收到了psd文件,但是電腦沒有安裝ps,該怎么解決這個問題呢?下面我們就來看看這個問題的解決辦法2024-12-24ps一直閃退是什么原因? Photoshop閃退原因及解決方案
在使用過程中,Photoshop總是會無緣無故地自動退出,這不僅打斷了工作流程,還可能導(dǎo)致未保存的更改丟失,令人頭疼不已,本文將深入剖析Photoshop自動退出的原因,并提供相2024-07-04怎么優(yōu)化PSD文件? 有效防止Photoshop崩潰卡死的技巧奧
明就幾個圖層,并沒有引入什么大型圖片,但是 PSD 文件卻異常巨大,而且用起來經(jīng)??D?下面我們就來看看pds文件優(yōu)化方法2024-05-25- 將多個圖層合并為一個圖層,但作為設(shè)計師你需要了解一下合并圖層是有破壞性的,下面我們就來詳細介紹一下2024-05-25
- 通常是因為Photoshop使用的暫存盤空間不足,導(dǎo)致無法正常工作,那么,如何解決這一問題呢?本文將為您提供詳細的解決方案2024-05-25
PS存儲和存儲為有什么區(qū)別? 理解存儲與存儲為的重要性
ps導(dǎo)出文件的時候,可以直接存儲,也可以另存存儲為,這兩個操作有區(qū)別嗎?新手該怎么保存文件呢?詳細請看下文介紹2024-03-28ps beta ai顯示高峰需求進不去怎么辦? psai高峰期需求用不了解決辦法
PSBetaAI2023加入了AI的功能,在使用過程中,有時會遇到一個令人煩惱的問題,那就是PhotoshopBetaAI提示我們正在面臨高峰需求,請稍候再試,針對這個問題,本文為大家整理2024-03-28ps段落兩端對齊不能用怎么辦? ps文字排版不能對齊的修復(fù)技巧
PS進行設(shè)計時,段落兩端對齊是一個常用的排版功能,它能讓文本看起來更加整潔和專業(yè),然而,許多用戶在使用PS時可能會遇到一個令人頭疼的問題:段落兩端對齊功能似乎不起作2024-03-09- PS插件是許多人常用的一種工具,有些用戶可能會困惑,不知道應(yīng)該將PS插件安裝到哪個文件夾,對于這個問題我們需要從多個角度進行分析,以便給出一個準確的答案2024-02-20
ps打開出現(xiàn)dll文件丟失怎么辦 ps提示缺少dll文件的詳細修復(fù)方法
打開ps時,系統(tǒng)提示缺少DLL文件,這通常意味著應(yīng)用程序無法找到它所依賴的DLL文件,可能是因為這些文件已經(jīng)被刪除、移動或更改了名稱,下面我們就來分享幾種解決辦法2024-02-19