案例参考3-网页设计作业

PHOTOSHOPCS实用教程期末作业——

网页设计设计要求

PHOTOSHOPCS实用教程规范排版设计*分区对称操作规范!即时保存图层操作……PHOTOSHOPCS实用教程2.思考设计理念参考借鉴勿抄袭定义主题搜集素材风格定位延伸学习工具延伸运用课后练手设计要求

PHOTOSHOPCS实用教程设计要求

必要内容网页主题图片展示文字信息风格设计分区明快，美观大方页面色调统一素材与主题呼应PHOTOSHOPCS实用教程可能需要的素材图片版头图片，各主体图，网页底图……文字主题文字说明，图注文字………………网页版头设计步骤与要点：1、

新建：文件→新建

设置：名称、宽与高、分辨率、前景色填充图片背景颜色：Alt+Delete编辑→填充(Shift+F5)油漆桶

PHOTOSHOPCS实用教程网页版头2、

版头与主体划分：视图→标尺设置：编辑→首选项→参考线、网格和切片PHOTOSHOPCS实用教程网页版头3、添加版头图片：文件→打开利用“移动工具”调整图片位置、大小、比例PHOTOSHOPCS实用教程网页版头4、版头图片的融合：图层面板→图层混合模式→正片叠底PHOTOSHOPCS实用教程网页版头5、版头图片渐变：渐变工具→单击选项栏上的渐变色条→渐变编辑器→选择“黑色、白色”图层面板→添加图层蒙版→调整方向拖动鼠标，形成图片颜色的自然过渡PHOTOSHOPCS实用教程网页版头6、版头文字：选择“横排文字工具”窗口→字符预设参考线：纵向拖动鼠标至页面中心位置文字描边：在文字图层面板内双击文字图层（空白处）→混合选项右键→混合选项→描边文字描边设置：大小、位置、混合模式、不透明度、颜色PHOTOSHOPCS实用教程网页版头7、图层分组整理：图层面板→创建新组（当前图层为最上方图层）右键→组属性:设置图层组名称和颜色，便于标记和编辑。拖动除背景图层以外的所有图层至“页面版头”图层组（灵活利用【Shift】键或【Ctrl键】）PHOTOSHOPCS实用教程网页主体设计步骤与要点：1、利用网格放置文字标签和图片：视图→显示→网格网格设置：编辑→首选项→参考线、网格和切片PHOTOSHOPCS实用教程网页主体2、绘制文字标签框：“矩形工具”“形状图层”按钮复制文字标签框：Ctrl+J按照网格位置平移，排列PHOTOSHOPCS实用教程网页主体3、设置文字标签框颜色和样式：右键图层→混合选项→“渐变叠加”单击“图层面板”下方“添加图层样式”按钮→“渐变叠加”PHOTOSHOPCS实用教程网页主体4、添加文字标签框内小图形：“矩形工具”“椭圆工具”“多边形工具”“自定义工具”……添加文字标签：“横排文字工具”

PHOTOSHOPCS实用教程网页主体设计步骤与要点：5、创建“彩色标签”图层组：图层面板→创建新组PHOTOSHOPCS实用教程网页主体设计步骤与要点：6、添加主题图片：文件→打开“矩形选框工具”→设置为“固定比例”复制选框内容Ctrl+C,粘贴至网页设计文件Ctrl+V根据文字标签框位置，调整图片大小和位置PHOTOSHOPCS实用教程网页主体设计步骤与要点：7、设置图片样式：图层面板→添加图层样式→描边PHOTOSHOPCS实用教程网页主体设计步骤与要点：8、添加图注文字：“横排文字工具”

PHOTOSHOPCS实用教程网页主体设计步骤与要点：9、添加分割虚线：“横排文字工具”+

“竖排文字工具”

PHOTOSHOPCS实用教程网页主体设计步骤与要点：10、添加纹理背景：文件→打开→纹理素材文件

放置在于“横竖虚线”图层组内

设置：图层面板→图层混合模式/不透明度/填充

渐变处理：渐变工具+图层蒙版PHOTOSHOPCS实用教程网页主体设计步骤与要点：11、色阶调整：

图层→新建调整图层→色阶

图层面板→创建新的填充或调整图层→色阶图像保存：

PSD文件→用于再次编辑

JPG文件→用于图像浏览

PHOTOSHOPCS实用教程优秀网页设计参考PHOTOSHOPCS实用教程

优秀网页设计参考PHOTOSHOPCS实用教程

优秀网页设计参考PHOTOSHOPCS实用教程

优秀网页设计参考PHOTOSHOPCS实用教程

优秀网页设计参考PHOTOSHOPCS实用教程优秀网页设计参考PHOTOSHOPCS实用教程

优秀网页设计参考PHOTOSHOPCS实用教程

优秀网页设计参考PHOTOSHOPCS实用教程

优秀网页设计参考PHOTOSHOPCS实用教程

优秀网页设计参考PHOTOSHOPCS实用教程

优秀网页设计参考PHOTOSHOPCS实用教程

优秀网页设计参考PHOTOSHOPCS实用教程

优秀网页设计参考PHOTOSHOPCS实用教程

优秀网页设计参考PHOTOSHOPCS实用教程

往期网页设计作业PHOTOSHOPCS实用教程

往期网页设计作业PHOTOSHOPCS实用教程

往期网页设计作业PHOTOSHOPCS