带你读《Photoshop+Dreamweaver淘宝天猫网店美工与广告设计一本通 : 实战版》之二:商品图像的快速调整

简介: 本书是一本从网店装修实际需求出发编写的实例型教程,以Photoshop和Dreamweaver为软件环境,详细讲解了它们在网店装修中的应用,帮助读者快速掌握网店图像处理和页面排版的核心技能。本书内容实用,图文并茂,可操作性强,适合网店店长、网店美工等希望快速掌握网店装修和推广技术的读者阅读和学习,也可作为大专院校相关专业或电商培训机构的教学参考书。

点击查看第零章
点击查看第二章

第1章 商品图像的快速调整

在进行网店的装修设计之前,首先需要掌握一些商品图像的快速处理技法,如调整图像的大小和分辨率、设置适合网店显示的构图、旋转与缩放图像等,这些操作均可以使用Photoshop中的菜单命令或工具来实现。

image.png

步骤 01 启动Photoshop,执行“文件>打开”命令,在打开的对话框中选中需要打开的素材,单击“打开”按钮。

image.png

步骤 02 即可在Photoshop中打开所选素材图像,选中01.jpg素材图像,按下快捷键Ctrl+C,复制女包图像。

image.png

步骤 03 切换到处理好的02.psd背景图像,按下快捷键Ctrl+V,将复制的女包图像粘贴到画面中,调整其大小和位置。

image.png

步骤 04 选择“图层1”图层,将图层的混合模式更改为“变暗”,混合图像,将女包图像拼合到新背景中。

image.png

步骤 05 执行“文件>存储为”菜单命令,打开“另存为”对话框,在对话框中指定文件的存储位置,输入文件名,设置后单击“保存”按钮,存储图像。

image.png
image.png

image.png

步骤 01 打开03.jpg素材图像,可以看出这是为商品制作的详情展示图。

image.png

步骤 02 执行“图像>图像大小”菜单命令,打开“图像大小”对话框,在对话框中查看原图像的大小。

image.png

步骤 03 网店装修中的图像的分辨率只需设置为72dpi,因此在“分辨率”右侧的文本框中输入数值72。

image.png

步骤 04 根据网店图像的尺寸要求,在“宽度”文本框中输入数值990,输入后根据长宽比自动调整高度,单击“确定”按钮。

image.png

步骤 05 此时在图像窗口中可看到在相同的缩放比例下,图像变小了很多。

image.png
image.png
image.png
image.png
image.png

步骤 01 执行“文件>脚本>图像处理器”菜单命令,打开“图像处理器”对话框。

image.png

步骤 02 单击“选择要处理的图像”选项组中的“选择文件夹”按钮,在打开的对话框中单击选择要处理的素材文件夹。

image.png

步骤 03 单击“选择位置以存储处理的图像”选项组中的“选择文件夹”按钮,在打开的对话框中选择存储图像的文件夹。

image.png
image.png

步骤 04 取消勾选“存储为PSD”复选框,在“存储为JPEG”下方输入W值为750像素,单击“运行”按钮。

image.png

步骤 05 开始文件的批量调整,完成后打开存储处理后图像的文件夹,选中文件可以看到调整后的文件类型和文件大小等属性。

image.png
image.png

步骤 01 打开06.jpg素材图像,使用“矩形选框工具”在图像中创建选区,执行“编辑>拷贝”菜单命令,拷贝图像,打开05.psd素材图像,执行“编辑>粘贴”菜单命令,粘贴图像。

image.png

步骤 02 在“图层”面板中可以看到粘贴的图像被存储到新的“图层1”图层中,执行“编辑>自由变换”菜单命令,打开自由变换编辑框,将鼠标指针移到图像转角位置,按住Shift键向内侧拖动,缩小图像。

image.png

步骤 03 打开07.jpg素材图像,使用“矩形选框工具”在图像上创建选区,按下快捷键Ctrl+C,拷贝图像,打开05.psd素材图像,按下快捷键Ctrl+V,粘贴选区内的图像。

image.png

步骤 04 按下快捷键Ctrl+T,打开自由变换编辑框,将鼠标指针移到编辑框右下角位置,当指针变为双向箭头时,按住Shift键并拖动,等比例缩放编辑框中的人物图像。

image.png

步骤 05 将缩放后的图像移到合适的位置,再切换到07.jpg图像窗口,使用“矩形选框工具”在画面中创建选区,按下快捷键Ctrl+C,复制选区内的图像。

image.png

步骤 06 切换到05.psd图像窗口,按下快捷键Ctrl+V,粘贴图像。使用相同的方法复制并粘贴图像,得到“图层3”和“图层4”图层,在图像窗口中查看复制的图像效果。

image.png

步骤 07 同时选中“图层”面板中的“图层3”和“图层4”两个图层,按下快捷键Ctrl+T,打开自由变换编辑框,调整编辑框中的图像,将图像缩放至合适大小。

image.png
image.png

步骤 01 打开08.jpg素材图像,按下快捷键Ctrl+J,复制图像,生成“图层1”图层。

image.png

步骤 02 执行“图像>图像旋转>逆时针90度”菜单命令,按逆时针方向将图像旋转90度,在图像窗口中查看旋转后的效果。

image.png
image.png

步骤 01 打开09.jpg素材图像,按下快捷键Ctrl+J,复制图像,生成“图层1”图层,单击“背景”图层前的“指示图层可见性”图标,隐藏“背景”图层。

image.png

步骤 02 选择“套索工具”,在选项栏中设置“羽化”值为4像素,在画面中单击并拖动,选择需要旋转的图像区域。

image.png
image.png

步骤 03 执行“编辑>变换>水平翻转”菜单命令,水平翻转选区中的图像,在图像窗口查看图像效果。

image.png

步骤 04 执行“编辑>变换>旋转”菜单命令,显示旋转编辑框,将鼠标指针移到编辑框转角位置,单击并拖动,旋转图像。

image.png

步骤 05 旋转至合适的角度后,按下Enter键,应用旋转,然后按下快捷键Ctrl+D,取消选区,再新建“图层2”图层。

image.png

步骤 06 选择“画笔工具”,在选项栏中设置画笔的“不透明度”和“流量”,将画笔颜色设置为与背景相近的颜色,在画面中涂抹,填充因旋转图像而产生的透明区域。

image.png
image.png

步骤 01 打开10.jpg素材图像,按住“吸管工具”按钮不放,在展开的面板中单击选择“标尺工具”,沿照片中的书籍装订线单击并拖动,绘制一条水平参考线。

image.png

步骤 02 执行“图像>图像旋转>任意角度”菜单命令,打开“旋转画布”对话框,可以看到拉直图像所需的正确角度已显示在该对话框中,直接单击“确定”按钮。

image.png

步骤 03 随后软件会根据指定的角度旋转图像。选择“裁剪工具”,在画面中单击并拖动,绘制合适大小的裁剪框,再按下Enter键确认裁剪图像。

image.png
image.png
image.png

步骤 01 打开11.jpg素材图像,选择工具箱中的“裁剪工具”,在画面中单击,显示裁剪框。

image.png

步骤 02 在选项栏单击“设置裁剪工具的叠加选项”按钮,在展开的列表中选择“黄金比例”选项,显示黄金比例裁剪参考线。

image.png

步骤 03 将鼠标指针移到裁剪框边缘位置,单击并拖动鼠标,调整裁剪框,将要展示的戒指置于画面的黄金分割点位置。

image.png

步骤 04 单击“裁剪工具”选项栏中的“提交当前裁剪操作”按钮,裁剪图像,查看裁剪后的画面构图效果。

image.png

步骤 05 按下快捷键Ctrl+J,复制图像,生成“图层1”图层,设置混合模式为“滤色”,输入“不透明度”为80%。

image.png

步骤 06 添加图层蒙版,选择“渐变工具”,在选项栏中设置选项,从戒指位置向外侧拖动,创建渐变。

image.png
image.png
image.png

相关文章
带你读《Photoshop+Dreamweaver淘宝天猫网店美工与广告设计一本通 : 实战版》之三:商品图像的修复与修饰
本书是一本从网店装修实际需求出发编写的实例型教程,以Photoshop和Dreamweaver为软件环境,详细讲解了它们在网店装修中的应用,帮助读者快速掌握网店图像处理和页面排版的核心技能。本书内容实用,图文并茂,可操作性强,适合网店店长、网店美工等希望快速掌握网店装修和推广技术的读者阅读和学习,也可作为大专院校相关专业或电商培训机构的教学参考书。
带你读《Photoshop+Dreamweaver淘宝天猫网店美工与广告设计一本通 : 实战版》之一:写在处理之前
本书是一本从网店装修实际需求出发编写的实例型教程,以Photoshop和Dreamweaver为软件环境,详细讲解了它们在网店装修中的应用,帮助读者快速掌握网店图像处理和页面排版的核心技能。本书内容实用,图文并茂,可操作性强,适合网店店长、网店美工等希望快速掌握网店装修和推广技术的读者阅读和学习,也可作为大专院校相关专业或电商培训机构的教学参考书。