hotoshop网页效果图设计

《hotoshop网页效果图设计》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、Photoshop网页效果图设计Photoshop网页效果图设计8/21/20211主要内容1网页logo设计12网页导航设计23主页栏目设计34登录界面设计45图像切片制作58/21/202128/21/202131网页logo设计8/21/20214网页logo内容，采用图形与文字相结合的方式，使用校标，文字和图片组合而成，色彩采用蓝色、红色和黄色相结合的方式，体现严谨、科技的色彩。1.1logo内容分析8/21/202151.2PhotoshopCS3界面介绍8/21/202161.3网页logo的设计1.新建文件启动PhotoshopC

2、S3，选择菜单“文件

3、新建”命令，设置文件大小为1109*1021（宽度*高度），分辨率72像素/英寸（dpi），色彩模式为RGB，背景颜色为白色，文件名称为网站首页。在设计效果图时，我们需要注意，由于网页是需要用浏览器打开显示的，需要考虑浏览器的菜单、工具栏、滚动条等窗口元素所占据的空间，因此当显示器的分辨率为800*600像素时，网页效果图标准尺寸是775*435像素。当显示器的分辨率为1024*768像素时，网页尺寸为1004*600像素，注意设置网页的左右、上下边距为0。8/21/202171.3网页logo的设计2.创建图层单击图层面

4、板右下角的创建新图层按钮，创建“图层一”，双击“图层一”文字，修改为“网页背景”。注意：当前选中哪个图层，单击创建新图层按钮后，新图层就出现在当前选中的图层之上，可以用鼠标拖动图层改变层次顺序，或按【CTRL+[】或【CTRL+]】来调整当前图层的顺序。8/21/202181.3网页logo的设计3.创建矩形选区选择图层面板最上方的图层，单击创建新图层图标创建新图层，双击图层的名字改名为“logo区域”。使用矩形选框工具，建立矩形选区填充颜色（蓝色），并添加投影效果和光照效果。4.导入校标图片,去除背景，增加阴影和镜头光晕效果5.导入bj3.j

5、pg和学校图片.JPG，将图片裁剪到适当尺寸，放入网站的头部，调整图片的不透明度和颜色，使其与整个蓝色背景融合在一起8/21/202196.增加文字使用文本工具，输入网站名称“数学与计算机科学学院CollegeOfMathematicsAndComputerScience”，设置颜色为黄色，增加投影、外发光、内发光、斜面和浮雕、颜色叠加、光泽、和描边等效果设置字符字体设置字符字号设置字型设置行间距，即每行文字间的间隔。设置水平缩放设置垂直缩放设置字符的比例间距设置字符的字间距设置基线偏移量设置字符宽度设置字符颜色设置文字输入样式语言设置防锯齿功

6、能设置8/21/2021102网页导航设计为了突出网页导航的功能，将导航文字安排在矩形的蓝色背景之上，并对矩形背景做加阴影，浮雕效果处理，以使导航显得更加明显，文字采用白色宋体，在背景的衬托下，显得不是那么生硬。8/21/2021112.1导航背景的设计1.创建矩形选择矩形工具右侧下方的三角形，选择矩形工具8/21/2021122.1导航背景的设计3.填充渐变颜色选择渐变工具，设置渐变颜色带为左侧（R：104，G：179，B：221），右侧（R：38，G：108，B：178），从选取左下角向右上角拖曳鼠标，填充蓝色的渐变，按【CTRL+D】可以

7、取消当前区域的选择，后面会经常用到这一快捷键。8/21/2021132.2导航文字的设计使用文字工具，设置文字字体为宋体，大小为17点，颜色为白色，输入导航文字。8/21/2021143主页栏目设计1.主页布局分三个区域上方区域为三个内容，用渐变矩形框区分；中间为图片展览，用两条分隔线标识；下方也有三个内容，用三个矩形框区分8/21/2021151.素材的选择处理打开图片素材，使用矩形选择工具，选择图片的主体，选择菜单“编辑

8、复制【CTRT+C】”，选择“网页背景”图层，单击创建新图层图标，在“网页背景”图层上面创建新图层，改名为“图片”，选择

9、菜单“编辑

10、粘贴【CTRL+V】”。注意：快捷方法是，使用移动工具直接将选中的图形拖动到目标效果图中，Photoshop会自动新建图层放置该图形。3.1网页主图的设计8/21/2021163.1网页主图的设计2.栏目图标和文字处理选择合适图标，做去背景处理导入背景图案，复制图层，放到合适位置上8/21/2021173.2网页底部的设计选择渐变工具，设置颜色从左至右依次为（R：229，G：246，B：254），（R：87，G：195，B：241），（R：32，G：112，B：172），不透明度从左至右依次为10%，80%，100%，注意渐变色带上

11、面的标志为不透明度设置，下面的标志为颜色设置，单击标志，再改变不透明度或颜色，从上向下填充渐变颜色，按【CTRL+D】取消选区。8/21/202118