Photoshop CS 网页设计

00-课程介绍

学习流行的网页效果,设计漂亮的网页

01-创建文档

  • 制作作品:

主菜单”文件“/新建,“预设”选择“自定”、宽1280像素、高1680像素;

前景色、拾色器(还有在图片区域中取颜色的吸管)、Alt+Backspace用偏绿色前景色填充整图;

02-缩放与抓手工具

  • 基础知识:

鼠标停留在工具按钮上能看到工具的名称和快捷键;右键点击或者长安工具按钮会显示多个同类工具选项;

选“缩放工具”以后,单击或者拖拉鼠标来缩放,按住或松开Alt键在放大和缩小状态来回地切换;工具选项栏中“实际像素”按钮等同于双击”缩放工具”或者Ctrl+1;Ctrl+0是“适合屏幕”;

空格键是临时切换到“抓手工具”,空格键+Alt键是临时切换到“缩放工具”;

03-使用图形工具构画简单的图形

  • 基础知识:

选“矩形工具”以后,按住Shift键可以画正方形;工具选项栏中“形状/路径/像素”选择的是“形状”那么画图时会新建图层,图层区双击图层名字左边可以调整形状前景色;

拖动图层调整上下顺序,拖动图层到垃圾桶会删除图层;

自定形状工具的工具选项栏中有各种其它形状可以选择;

  • 制作作品:

“圆角矩形工具”,用白色画大矩形,用白色画小矩形做主菜单项目背景;

04-利用渐变工具创建渐变效果

  • 基础知识:

选“渐变工具”以后,工具选项栏中可以选择“线性渐变”,点击“预设”倒三角可以选择第一个“前景色到背景色渐变”,点击预设倒三角左边出现预设编辑器,其中渐变指示条上面是不透明度、下面是色标,下面点按可以添加色标实现超过两种颜色的渐变;

  • 制作作品:

图片顶部线性渐进效果:在背景图层上新建图层,选择“线性渐变”,“预设”选择“前景色到透明渐变”,在图片顶部竖直往下拖到总高度的几分之一;

光照效果:在“线性渐变”图层上新建图层,选择“径向渐变”,“预设”选择“前景色到透明渐变”,在图片顶部往右下拖到总高度的几分之一;

05-文字工具的使用

  • 基础知识:

选“文字工具”以后,工具选项栏中“TT“可以用鼠标按住再左右稍微拖动调整字号; 对于选择的文字用工具选项栏中的选项设置完后,点击”打勾“提交当前所有编辑,想要再次进入编辑状态请(确认选择了文字工具然后)鼠标移动到要编辑的文字点击,或者双击图层面板文字图层名称左边;

工具选项栏中扭曲的”T”是变形文字;

主菜单”窗口“/”字符“ 切换显示字符面板;

  • 制作作品:

选”横排文字工具”,用下面的文字粘贴:

同步
使用同步,你可以同时管理你的笔记在noteseven与你的电脑上

备份与恢复
使用文件分享与Web分享您可以备份所有的数据到你的电脑上通过Web浏览器分享,你还可以在任何恢复他们

蓝牙笔记传输
noteseven的用户之间可通过蓝牙互相传输笔记

文字图层移到上层,工具选项栏中调整文字颜色,才能看到文字;

继续新建文字图层:菜单 演示 功能 帮助;

继续新建文字图层:noteseven ;

06-工作区

主菜单”编辑“/首选项/单位与标尺/”标尺”和”文字”都选择”像素“,点”确定”;

“面板”可以”折叠为图标“/“展开面板”,点“面板”中的”图层“,图层面板调整大一些,主菜单”窗口“/工作区/新建工作区,命名为网页工作区;

07-理解图层

选择多个图层,Ctrl+g图层分组;

选择移动工具以后,选择图层,用上下左右箭头 或者 在图像中拖动想要移动的图层可以移动图层的位置,或者工具选项栏中勾上“自动选择”选”图层”,点击图片某处选择所在图层后,可以移动图层,工具选项栏中勾上“自动选择”选”组”,点击图片某处选择所在图层组后,可以移动图层组;

08-图层样式1

  • 制作作品:

图层区双击”noteseven“图层名字右边出现”图层样式“对话框;

投影

描边

颜色叠加

可以新建样式,新建的样式会成为一个按钮出现在”样式“面板,点击此按钮就会把样式应用再选择的图层上,在面板区图层上点右键有清除图层样式;

09-图层样式2

  • 制作作品:

图层区双击”菜单背景“图层名字右边出现”图层样式“对话框;

投影

斜面和浮雕

渐变叠加

10-画笔工具

  • 制作作品:

新建一个图层,选铅笔工具,按住Shift不放手画分割直线;

为了画分割虚线:窗口/画笔/间距设为比如400%;

11-使用图片素材

  • 制作作品:

打开iphone图片,用”移动工具”拖放到演示网页,把新图层命名为iphone;

iphone图层点右键选择”转换为智能对象“后缩小和放大不再模糊;

12-图层蒙板与剪切蒙板

13-创建镜像效果

14-图层的融合

15-创建页面之间的阴影分隔线

16-设计网站的菜单背景

17-设计漂亮的按钮

18-理解图片格式

19-使用切片工具分割设计好的网站页面

发表评论