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

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