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

PS网页设计作业要求：
1、必要内容： 网页主题，图片展示，文字信息 2、设计要求： 分区明快，美观大方，内容丰富不混乱 图片、文字等内容与主题相呼应 页面整体色调统一
3、优化设计： 技 能——工具和命令的多重运用，延伸运用 （高分要领） 设计感——设计想法→设计灵性→设计质感 网页主题自定，素材自选
网页版头 3、
添加版头图片： 文件 → 打开
利用“移动工具” 图片位置、大小、 调整
PHOTOSHOP CS 实用教程
网页版头 4、
版头图片的融合： 图层面板→ →正片叠底
PHOTOSHOP CS 实用教程
网页版头 5、
版头图片渐变： 渐变工具 →单击选项栏 上的渐变色条→ →选择 “黑色、白色”
网格设置：编辑→首选项 →参考线、网格和切片
PHOTOSHOP CS 实用教程
网页主体 2、
绘制文字标签框： “ ” “形状图层”按钮
复制文字标签框： Ctrl + J 按照网格位置平移，排列
PHOTOSHOP CS 实用教程
网页主体 3、
设置文字标签框颜色和样式： 右键图层→ →“渐变叠加” 单击“图层面板”下方“ ”按钮→“渐变叠加”
新建：文件 → 新建
设置：名称、宽与高、分 辨率、前景色
填充图片背景颜色： • Alt + Delete • 编辑 → 填充( Shift + F5 ) • 油漆桶
PHOTOSHOP CS 实用教程
网页版头 2、
版头与主体划分： 视图 → 标尺
设置：编辑 → 首选项 → 参考线、网格和切片
PHOTOSHOP CS 实用教程
可参考、借鉴、模拟 严禁照搬、复制、同学之间抄袭
PHOTOSHOP CS 实用教程
根据文字标签框位置，调整图片大小和 位置
PHOTOSHOP CS 实用教程
网页主体设计 步骤与要点： 7、
设置图片样式： 图层面板→ →描边
PHOTOSHOP CS 实用教程
网页主体设计 步骤与要点： 8、
添加图注文字： “横排文字工具”
PHOTOSHOP CS 实用教程
网页主体设计 步骤与要点： 9、
图层面板 → 添加 → 调整方向拖动鼠标，形 成图片颜色的自然过渡
PHOTOSHOP CS 实用教程
网页版头 6、
版头文字： 选择“横排文字工具” 窗口 → 字符
预设参考线： 纵向拖动鼠标至页面中心位置
文字描边： 在文字图层面板内双击文字图层 （空白处） → 右键→混合选项→描边 文字描边设置： 大小、位置、混合模式、不透明度、 颜色 PHOTOSHOP CS 实用教程
优秀网页设计参考
PHOTOSHOP CS 实用教程
优秀网页设计参考
PHOTOSHOP CS 实用教程
优秀网页设计参考
PHOTOSHOP CS 实用教程
优秀网页设计参考
PHOTOSHOP CS 实用教程
优秀网页设计参考
PHOTOSHOP CS 实用教程
往期网页设计作业
PHOTOSHOP CS 实用教程
优秀网页设计参考
PHOTOSHOP CS 实用教程
优秀网页设计参考
PHOTOSHOP CS 实用教程
优秀网页设计参考
PHOTOSHOP CS 实用教程
优秀网页设计参考
PHOTOSHOP CS 实用教程
优秀网页设计参考
PHOTOSHOP CS 实用教程
优秀网页设计参考
PHOTOSHOP CS 实用教程
设计要求
必要
内容 风格
• 网页主题
• 图片展示
• 文字信息
• 分区明快，美观大方
• 页面色调统一 • 素材与主题呼应
设计
PHOTOSHOP CS 实用教程
可能需要的素材
图片 文字
• 版头图片，各主体图，
网页底图…… • 主题文字说明，图注文
字…… • ……
……
PHOTOSHOP CS 实用教程
网页版头设计 步骤与要点： 1、
往期网页设计作业
PHOTOSHOP CS 实用教程
往期网页设计作业
PHOTOSHOP CS 实用教程
往期网页设计作业
PHOTOSHOP CS 实用教程
往期网页设计作业
PHOTOSHOP CS 实用教程
往期网页设计作业
PHOTOSHOP CS 实用教程
往期网页设计作业
PHOTOSHOP CS 实用教程
网页版头 7、
图层面板 → 创建新组（当 前图层为最上方图层） 右键 → 组属性: 设置图层 组 ，便于标记 和编辑。 拖动除背景图层以外的所 有图层至“页面版头”图 层组（灵活利用【Shift】 键或【Ctrl键】）
PHOTOSHOP CS 实用教程
网页主体设计 步骤与要点： 1、
利用 放置文字标签和 图片： 视图→ 显示→ 网格
色阶调整： 图层→新建调整图层→色阶 图层面板→创建新的填充 或调整图层→色阶 →用于再次编辑 →用于图像浏览
PHOTOSHOP CS 实用教程
优秀网页设计参考
PHOTOSHOP CS 实用教程
优秀网页设计参考
PHOTOSHOP CS 实用教程
优秀网页设计参考
PHOTOSHOP CS 实用教程
期末作业——
网页设计
PHOTOSHOP CS 实用教程
设计要求
即时保存 操作规范! 图层操作
规 范
排版设计*
……
分区
对称
PHOTOSHOP CS 实用教程
设计要求
参考借鉴 勿抄袭 定义主题 设计理念 搜集素材 2. 思 考 风格定位 工具延伸 运用 课后练手
延伸学习
PHOTOSHOP CS 实用教程
添加分割虚线： “横排文字工具”+ “竖排文字工具”
PHOTOSHOP CS 实用教程
网页主体设计 步骤与要点： 10、
添加纹理背景： 文件→打开→纹理素材文件
放置在于“横竖虚线”图层 组内
设置：图层面板→ / / 渐变处理：渐变工具 +
PHOTOSHOP CS 实用教程
网页主体设计 步骤与要点： 11、
PHOTOSHOP CS 实ห้องสมุดไป่ตู้教程
网页主体 4、
添加文字标签框内小图形：
添加文字标签： “横排文字工具”
PHOTOSHOP CS 实用教程
网页主体设计 步骤与要点： 5、
创建 图层面板→ 创建新组
：
PHOTOSHOP CS 实用教程
网页主体设计 添加主题图片： 文件→打开 步骤与要点： “矩形选框工具” →设置为 复制选框内容Ctrl + C, 粘贴至网页设计 6、 文件Ctrl + V