搜尋
首頁web前端html教學Web前端切图你需要知道的几件事情_html/css_WEB-ITnose

相对于程序来说,切图门槛很低,只要有一些ps基础,摸索个五分钟基本也就了解各大概。但是就跟其他的所有技能一样,切图也是有很多技巧性和经验在里面的,这些东西可以让你的切图工作更有效率,更有目的性。

说明

笔者用photoshop cs5做示例,不同版本功能会有稍许差异。

第一部分:一些快捷键

相对于设计和绘画,切图用到的ps并不多,以下我总结一些在切图中比较常用的快捷键,这些快捷键能答复的提高你的工作效率,并且看起来很酷。

自由的控制视图系列

自由的浏览图片:按住空格后,鼠标拖动

自由的缩放图片:按住alt+滚轮

切换到实际像素(100%):Ctrl + Alt + 0

工作区类型切换:Tab

一直后退操作:Ctrl + Alt + Z

控制内容系列

通过画面上点选一个图层:Alt + 鼠标右键

在画面上拖动一个图层:V 切换到移动模式 鼠标拖动

复制拖动一个图层:移动模式下 Alt+拖动

删除一个图层:选中要删除的图层 按下 Delete

合并多个图层:选中要合并的图层 按下 Ctrl+E

选区内填充颜色:Alt+Delete (前景色) Ctrl+Delete(背景色)

缩放当前选择图层:Ctrl+T(自由变换模式)

实用工具系列

画一个选区:点击M进入选区模式 , 鼠标拖画

放弃选区:Ctrl+D

吸管工具:点击I进入吸管模式,点选画面颜色

文字工具:点击T进入文字模式,点选画面的文字或者创建新文本

切片工具:点击C进入切片模式(旧版本会有不同)

第二部分:一些实用技巧注意PS所处的状态

photoshop开启一个文件,软件本身就处于不同的状态之中,总结下来有这样几种

工具状态 -- 代表当前是出于移动模式,选区模式,切片模式或者是吸管模式等等,工具状态代表你当前对文档操作的类型。

有一些特殊的状态下,要求你必须做出选择,这时候状态的切换会暂停。比如,文字输入模式和自由缩放模式下,你必须先对当前所做修改做出确认,才可以进行下面的操作。这种情况的特点是状态栏会出现如下选择,如需快速放弃修改可点击ESC

图层状态 -- 代表你当前操作的对象,有一些对象只接受特殊类型的操作。

比如一些填充和绘制的功能无法在文字图层进行,图层组不能进行操作。总之,你在进行涂层修改操作的时候,一定要注意当前操作的对象,否则容易造成误操作和操作不能;

色彩索引模式 -- 这是一个常见错误,通过导出web格式图片出来的png会自动换成索引模式,如果要继续修改需要把索引模式转成RGB模式。

操作图层

如果不是设计者自己来切图,那么切图者需要从图层里来体会设计者的意图。如何分组,层次间的关系都体会了设计者对页面结构个人的理解。所以对一个设计稿来说,第一步是粗看图层,理解设计意图,其次是根据自己的理解对图层进行新的操作和转换。以下是关于图层操作的一些经验:

关闭图层可见性 --关闭图层可见性非常常用,因为有些页面元素是交织在一起的,你通常需要关闭其中某项先切一部分,再切一部分;

合并图层 -- 设计师载入第三方的元素这类的作法,会让页面某些小部件的图层结构异常复杂,这时候将整个组合并Ctrl+E 不失为一个好办法;

合并图层的时候需要注意的是图层效果会跟随合并,这一方面会带来不好修改的问题,所以合并完了通常Ctrl+Alt+Z还原,另一方面在某些时候还是很有用的,但个图层的效果跟空图层合并也会起到图层栅格化的效果(文字图层也可以跟空图层合并)。

复制图层 -- 有些时候一些sprite效果可以直接通过复制图层在原稿上列出来,再通过切片工具出图

图层盖章 -- 在一些图层特别复杂的页面,有时需要用到图层盖章工具,选中最顶层的图层,点击Ctrl+Alt+Shift+E 可以把以下的所有图层盖到一个新的图层上。这个操作的好处是可以在不影响图层本身的情况下,合并图层。

生成图片

1)图片格式 -- 图片格式的原则简单来说是架构复杂,色彩众多的图片jpg优先,色彩简单,需求透明的png优先。png24在IE6下不兼容。

2)切片工具 -- 切片工具是ps为切图提供的强大的批量的工具,所以一定要尽可能的使用它。使用切片之前先采用上述的方法对图层进行处理,然后按需划取需要的切片区域,使用切片工具的时候有如下几个小技巧:

切片选项 -- 划取完分区以后,要对切片进行一些设定是很重要的,切片工具下Alt+点击切片,会弹出窗口。

首先,可以检查切片的尺寸和位置,尤其是尺寸,比如你要切的按钮定宽高,这里的检查和设置就至关重要。其次,在这里直接命名,可以省去出图以后重命名的时间。

切片储存 -- 切片在储存的时候,可以点选每个切片对其设定不同的图片格式,保存的时候可以选择保存选择的切片而不是全部。

3)全新图片 -- 很多时候,切片难以直接使用,图片需要进行二次处理。这时候我认为有以下几点需要注意:

千万不要对jpg进行二次处理:jpg就算质量100%也是有损格式,二次处理的jpg会有肉眼可见的质量损失,所以要采用png的各种作为中转。

注意图片尺寸:有些版本的ps在拖拽进文档的时候会默认尺寸适应,这会导致图片尺寸在你不知情的情况下发生改变。解决的办法可以是优先创建尺寸正确的图片,或者以源文档图层的形式拖拽进新文档。

缩放 : 任何格式的图片缩放都会产生质量损失,尽可能采用矢量图缩放,或者在源文件的路径里缩放再拖拽。

4)新图片处理 -- 新图片的处理有以下几个常用的技巧:

图像裁切和显示全部 : 图片小于画布或者图片大于画布的情况下使用裁切和显示全部命令,可以保证图片的精确性。命令位于 图像(I) -> 裁切/显示全部。

活动选区,复制,粘贴 :这三个命令配合使用可以实现很多转换。比如一个渐变按钮的缩短扩大。

切图本身并不是很难,再转换成网页的过程中,需要我们有足够的经验去书写代码,而这个过程,需要我们经常练习,学习。这样我们的页面质量会越来越高。还需要我们懂得一些知识、标签及声明,如css sprite技术、一些兼容性的书写、移动站点的规范,这些都要求我们有足够的经验。

文章来源:爱思资源网

文章链接: http://www.aseoe.com/show-41-648-1.html

本站文章均由 HTML5梦工场 编辑从其他媒体精选HTML5相关文章转载,仅供网友学习和交流,如果我们的工作有侵犯到您的权益,请及时联系小编QQ:123464386,我们会在第一时间进行处理!投稿与合作,请发至邮箱:tommy@html5dw.com

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
HTML中的布爾屬性是什麼?舉一些例子。HTML中的布爾屬性是什麼?舉一些例子。Apr 25, 2025 am 12:01 AM

布爾屬性是HTML中的特殊屬性,不需要值即可激活。 1.布爾屬性通過存在與否控制元素行為,如disabled禁用輸入框。 2.它們的工作原理是瀏覽器解析時根據屬性的存在改變元素行為。 3.基本用法是直接添加屬性,高級用法可通過JavaScript動態控制。 4.常見錯誤是誤以為需要設置值,正確寫法應簡潔。 5.最佳實踐是保持代碼簡潔,合理使用布爾屬性以優化網頁性能和用戶體驗。

如何驗證您的HTML代碼?如何驗證您的HTML代碼?Apr 24, 2025 am 12:04 AM

HTML代碼可以通過在線驗證器、集成工具和自動化流程來確保其清潔度。 1)使用W3CMarkupValidationService在線驗證HTML代碼。 2)在VisualStudioCode中安裝並配置HTMLHint擴展進行實時驗證。 3)利用HTMLTidy在構建流程中自動驗證和清理HTML文件。

HTML與CSS和JavaScript:比較Web技術HTML與CSS和JavaScript:比較Web技術Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術:1.HTML定義網頁結構,2.CSS負責網頁外觀,3.JavaScript提供網頁動態和交互性,它們共同作用,打造出用戶體驗良好的網站。

HTML作為標記語言:其功能和目的HTML作為標記語言:其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定義網頁的結構和內容,其目的在於提供一種標準化的方式來展示信息。 1)HTML通過標籤和屬性組織網頁的各個部分,如標題和段落。 2)它支持內容與表現分離,提升維護效率。 3)HTML具有可擴展性,允許自定義標籤增強SEO。

HTML,CSS和JavaScript的未來:網絡開發趨勢HTML,CSS和JavaScript的未來:網絡開發趨勢Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件,CSS的未來趨勢是CSS-in-JS和CSSHoudini,JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果,Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積,CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡,Serverless簡化開發但需優化冷啟動問題。

HTML:結構,CSS:樣式,JavaScript:行為HTML:結構,CSS:樣式,JavaScript:行為Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來:網絡設計的發展和趨勢HTML的未來:網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript:比較概述HTML與CSS vs. JavaScript:比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是:HTML負責內容結構,CSS負責樣式,JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容,確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式,使其美觀易讀。 3.JavaScript通過腳本控製網頁行為,實現動態和交互功能。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具