图2-20所示为一个简单的设计作品需要经过的大致流程。根据设计规范,我们可以打开已有的图像开始设计,或是新建一个空白的文档开始设计。然后根据客户需求或绘制图像,或置入素材进行修图、抠图、调色、合成等一系列调整。在完善设计后,将文件存储为PSD格式文档,同时导出便于浏览的图像格式,如JPEG格式或PDF格式。最后关闭设计文档和Photoshop,完成最终的设计。
图2-20
技巧提示:关于PSD格式
一般情况下,PSD格式是Photoshop最常用的存储格式,也是默认的存储格式。PSD格式可以保存设计文档中的图层、蒙版、通道和路径等信息,以方便随时修改。另外,TIFF和PSB格式也可以保存很多设计信息,只是这两种格式的文件会占用较大的存储空间。
开始做新的设计,需要根据两种不同的情况来定。如果是对一张图像进行修改,那么只需要打开这张图像,然后对其进行调整即可;如果从头到尾进行设计,那么需要根据设计需求新建一个空白文档开始设计。
打开已有的文件做设计
菜单栏: 文件>打开 快捷键: Ctrl+O
执行“文件>打开”菜单命令或者按快捷键Ctrl+O,在弹出的“打开”对话框中选择需要打开的文件,单击“打开”按钮
或者双击文件即可在Photoshop中打开该文件,如图2-21所示。
图2-21
疑难问答:为什么在打开文件时找不到需要的文件?
如果发生这种现象,可能有以下两个原因。
第1个: Photoshop不支持这个文件的格式。
第2个: “文 件类型”没有设置正确,如设置“文件类型”为JPEG格式,那么在“打开”对话框中就只能显示这种格式的图像文件,这时可以设置“文件类型”为“所有格式”,就可以看到相应的文件(前提是计算机中存在该文件)。
另外,还可以通过以下3种方法快速打开已有的图像文件。
第1种: 选择一个需要打开的文件,然后将其拖曳至Photoshop的快捷方式图标上,如图2-22所示。
第2种: 选择一个需要打开的文件,然后单击鼠标右键,在弹出的菜单中选择“打开方式>Adobe Photoshop 2023”命令,如图2-23所示。
第3种: 如果已经运行了Photoshop,可以直接将需要打开的文件拖曳至Photoshop的文档窗口中,如图2-24所示。
图2-22
图2-23
图2-24
疑难问答:找不到Adobe Photoshop 2023选项怎么办?
如果在“打开方式”菜单中找不到Adobe Photoshop 2023选项,可以选择“选择其他应用”命令,在弹出的列表中选择Adobe Photoshop 2023。
新建空白文档做设计
菜单栏: 文件>新建 快捷键: Ctrl+N
在新建文档前,需要考虑设计作品的单位、分辨率及颜色模式。如果是印刷品,如杂志和图书等,应该将单位设置为传统长度单位(毫米或厘米),并且要根据印刷品的类型设置相应的分辨率,同时必须将颜色模式设置为CMYK;如果将设计作品用于手机、计算机或是投影机等电子显示设备上,则需要将单位设置为“像素”,分辨率设置为72ppi(像素/英寸),颜色模式设置为RGB颜色模式。
执行“文件>新建”菜单命令或者按快捷键Ctrl+N,打开“新建文档”对话框,如图2-25所示。在“新建文档”对话框中不仅可以设置文档的名称、尺寸、分辨率和颜色模式等信息,还可以根据设计作品的类型选择相应的设计模板。
模板: 根据设计作品的类型,选择与之对应的模板。例如,要设计一款UI界面,只需要在“移动设备”选项卡中选择相应的模板即可,如图2-26所示。对于初学者而言,模板是一项很实用的功能,因为它包含尺寸、分辨率等相关信息,无须设置其他参数。
图2-25
图2-26
未标题-1
:
设置文档的名称。设置好文档参数后,单击其右侧的
按钮可以将其保存为预设模板。
宽度/高度/方向/画板:
“
宽度”和“高度”用于设置文档的尺寸;
按钮用于将文档设置为竖向,
按钮用于将文档设置为横向;勾选“画板”选项,可以创建画板文档。
知识链接:画板工具
画板是一项很实用的功能,常用于设计电商详情页、UI和网页等。关于“画板工具”
的具体用法请参阅第10章“10.5.1 UI设计中离不开的画板”中的相关内容。
分辨率: 在手动创建文档时,根据作品文档的不同用途设置文档的分辨率,单位有“像素/英寸”和“像素/厘米”两个选项。
颜色模式: 根据作品文档的用途设置作品的颜色模式和位深度。
背景内容: 用于设置文档的背景,可以设置为白色、黑色、背景色和透明效果,也可以自定义一种背景色。如果将“背景内容”设置为“透明”,那么新建文档的背景就是透明的,Photoshop中用棋盘格表示透明区域,如图2-27所示。
图2-27
高级选项: 在一般情况下,该选项组中的参数保持默认设置即可。
执行“编辑>首选项”菜单命令或按快捷键Ctrl+K,打开“首选项”对话框,在“常规”选项卡中勾选“使用旧版‘新建文档’界面”选项,这样“新建”对话框将会变成旧版的对话框,如图2-28和图2-29所示。旧版“新建”对话框的功能与新版本完全相同,只是更加“小巧”,建议初学者使用更加直观的新版对话框,待熟练掌握Photoshop后可以使用旧版的对话框。
图2-28
图2-29
根据客户需求做设计是制作作品非常重要的环节,图2-30所示为该环节的流程细节。在这个环节中,设计师需要根据客户的需求做一些前期准备工作,如对客户提供的文案进行梳理并提炼重点,然后展开头脑风暴,寻找参考资料,搜集设计素材等。做好前期准备后,开始设计,这是一个非常烦琐的过程,一般需要设计出2~3种方案供客户选择。在客户选定方案后,还可能会修改细节,最终才能定稿。
图2-30
设计完作品后,需要对文档进行保存。这步操作看似简单,却是初学者十分容易忽略的。
存储设计文档
菜单栏: 文件>存储 快捷键: Ctrl+S
设计好作品后,需要将新文档存储起来,可以执行“文件>存储”菜单命令或者按快捷键Ctrl+S。但是执行“文件>存储”菜单命令存储新文档时会遇到以下两种情况。
第1种: 存储已有的图像。打开一张已有的图像,调整完图像后,如果“图层”面板中只有“背景”图层,执行“存储”命令会直接覆盖原来的图像,如图2-31所示。如果打开的是已经存在的PSD格式文档,执行“存储”命令也会直接覆盖原来的PSD格式文档。
第2种: 存储新建的文档。如果对新建的文档执行“存储”命令,会弹出“存储为”对话框,在该对话框中可以设置文档的存储名称及保存类型,如图2-32所示。
图2-31
图2-32
文件格式就是存储图像数据的方式,它决定了图像的压缩方法,以及支持Photoshop的哪些功能等。在“存储为”对话框中,可以选择多种存储格式,如图2-33所示。虽然可以存储的格式类型有很多,但是在工作中常用的往往只有几种。
图2-33
PSD: 这是Photoshop的默认存储格式。PSD格式能够保存图层、蒙版、通道、路径、未栅格化的文字和图层样式等。在一般情况下,存储文件都采用这种格式,以便随时进行修改。PSD格式文件可以直接置入Illustrator、InDesign、Premiere和After Effects等Adobe软件中。
PSB: 这是一种大型文档格式,只能在Photoshop中打开。PSB格式可以支持宽度或高度最高达300000像素的超大图像文件,且支持Photoshop所有的功能,可以保存图像的通道、图层样式和滤镜效果等。
GIF: 该格式被广泛应用于网络,支持透明背景和动画效果。
JPEG: 这是最常用的图像格式之一,也称JPG,该格式的文件具有文件小、易传输和易保存等优点。在向客户展示设计方案时,建议选用JPEG格式。
PNG: 这种格式对于设计师来说很常用。该格式的文件不仅具有文件小和背景透明等优点,还可以实现无损压缩,因此一些背景透明且很重要的素材常采用这种格式保存,以便再次使用。
TIFF: 这是一种通用的文件格式,可以保留Photoshop的图层和通道等,且几乎所有的绘画软件、图像处理软件和排版软件都支持该格式,而且几乎所有的扫描仪都可以生成TIFF格式图像。
将设计文档另存一份
菜单栏: 文件>存储为 快捷键: Shift+Ctrl+S
如果需要将设计文档存储到计算机的另一个位置或者使用另一文件名进行保存,可以执行“文件>存储为”菜单命令或者按快捷键Shift+Ctrl+S来完成操作,如图2-34所示。
图2-34
技巧提示:本书所讲的修图知识
存储好设计作品后,如果不再需要使用Photoshop做设计,建议将Photoshop关闭,因为只要Photoshop处于开启状态,就会耗费计算机的内存。要关闭Photoshop,可以执行“文件>退出”菜单命令或者按快捷键Ctrl+Q,也可以直接单击Photoshop界面的右上角的“关闭”按钮
。
案例文件 学习资源>案例文件>CH02>案例训练:设计你的第一幅作品.psd
素材文件 学习资源>素材文件>CH02>素材01.jpg、素材02.png
难易程度 ★☆☆☆☆
技术掌握 新建空白文档、置入图像、存储与关闭文档
学完上面的知识后,下面用一个非常简单的案例来讲解一下一幅作品的诞生过程。本例需要将一张尺寸为3556像素×2000像素的高清唯美插画修改为一张1920像素×1080像素的宽屏桌面壁纸,同时在画面中加入可爱的带翅膀的小孩的形象,如图2-35所示。
图2-35
01
新建一个空白文档。执行“文件>新建”菜单命令或者按快捷键Ctrl+N,打开“新建文档”对话框,然后将文档名称设置为“案例训练:设计你的第一幅作品”,“宽度”为1920像素,“高度”为1080像素,“分辨率”为72像素/英寸,“颜色模式”为“RGB颜色”,“背景内容”为“白色”,接着单击“创建”按钮
,如图2-36所示。新建的文档效果如图2-37所示。
图2-36
图2-37
02 开始设计。选择“学习资源>素材文件>CH02>素材01.jpg”文件,将其拖曳至画布中,如图2-38所示。
图2-38
知识链接:智能对象
步骤02中的“素材01.jpg”文件是以智能对象的方式置入画布中的。智能对象是Photoshop中一个非常重要的功能,无论是做平面设计、UI设计还是电商设计,都离不开智能对象。关于智能对象的功能与用法,请参阅“2.10 用智能对象做设计的好处”中的相关内容。
03 按住Alt键并向右下方拖曳右下角的控制点,使图像等比例缩放并填充整个画布,如图2-39和图2-40所示。完成后按Enter键确认操作。
图2-39
图2-40
04 选择“素材02.png”文件,将其拖曳至画布中,如图2-41所示。按住Alt键并向左上方拖曳右下角的控制点,使图像等比例缩放到合适的大小,如图2-42所示。完成后按Enter键确认操作。
图2-41
图2-42
05
在工具箱中选择“移动工具”
,将“素材02.png”拖曳至图2-43所示的位置。至此,壁纸的设计基本上就完成了。
06 存储设计并将其应用到桌面。执行“文件>存储”菜单命令或者按快捷键Ctrl+S,将设计文档存储为PSD格式文件,然后执行“文件>导出>导出为”菜单命令或者按快捷键Alt+Shift+Ctrl+W,将设计文档导出为一张JPEG格式的图像,同时将这张图像设置为桌面的壁纸,效果如图2-44所示。
图2-43
图2-44
案例文件 学习资源>案例文件>CH02>学后训练:设计一张爆款商品主图.psd
素材文件 学习资源>素材文件>CH02>素材03.psd、素材04.png
难易程度 ★☆☆☆☆
技术掌握 作品设计的基本流程
我们在做电商设计时,大部分情况下会先做好大概的设计,然后置入现成的一些促销图标,这样可以节省很多设计时间。通过本例可以学会如何活用现成的爆款图标,同时强化训练前面所学的设计流程,如图2-45所示。
图2-45