资源描述：
《photoshop中创建简洁专业的网页设计》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
1、photoshop学习教程www.50jun.comPhotoshop中创建简洁专业的网页设计先让我们看看待会即将完成的网页.准备你的photoshop文档1创建新的Photoshop文档(Ctrl/Cmd+N)根据下图.设置单位和标尺2确保你使用像素为单位,它是网页设计的标准尺度.从前置选项的windows对话框设置标尺(Ctrl/Cmd+K);点击单位和标尺,确保你所有的设置跟下图相同.为内容区域增加指导3激活photoshop的标尺,从查看>标尺里头.按下”Ctrl/Cmd+R”固定标尺的可见度.也可以通过打开窗口>信息(快捷
2、键:F8).通过选区工具,信息面板可以反馈不是有用的信息.按下”M”字键,选择矩形选区工具在画布的左上角绘制出一个120px宽的小盒子.你可以调整选区的大小通过信息面板.现在从左边开始,根据面板显示的宽度拖动参考线到如图的选区右侧.1photoshop学习教程www.50jun.com4移动选区到画布的右边缘.分配另外一条参考线到选区左侧.你的画布看起来应该是这样的:创建logo5现在我们开始创建LOGO.logo只是添加的应用颜色渐变效果所以很简单.创建新的组(图层>新建>组)并且命名为”logo“.6选择横向排版工具(T)切换到
3、大写字母键入”SMASHING”(或者你网站的名字).7进入字符面板,设置字体为Arial,样式为粗体,大小为42pt.设置反锯齿选项为锐利颜色为#101112.你同样可以在激活文字工具之后在工具栏更改.8双击打开图层面板对话框.选择图层渐变,点击渐变设置如下图显示设置.2photoshop学习教程www.50jun.com9将”SMASHING”图层移动到距离顶部35px距离左侧参考线0px的地方.你可以使用移动工具配合方向键使用.复制文字图层(图层>复制图层).移动复制文字到“SMASHING”的右边,更改为”Dzine“.重复
4、步骤6,7,8但颜色有些不同(左边颜色:#b27625,右边颜色:#e5ad27).10选择水平排版工具(T)在logo下面增加口号.11最后logo效果如图所示.激活/撤销参考线,进入视图>显示>网格或者使用快捷键Ctrl/Cmd+;创建导航栏12创建新组命名为”navigation“,置于”logo”组上方.从顶部标尺拖出一条参考线,直到距离画布顶端150px的地方.选择矩形工具(U)画出一直宽度为4px的水平线,颜色为#e3ab27,贯穿画布.13增加导航链接文字,距离水平线12px高距离左侧参考线20px.选择椭圆形工具画一
5、个宽高分别为72px*35px的矩形.移动此图层到“hover“下面.使用转换点工具拉直底部圆角.双击”hover”图层按钮打开图层样式对话框增加渐变颜色(左:#e5ad27,右:#b27625).选择横向排版工具(T),选中文字,“Home”更改颜色#ffffff(白色).创建”联系我们”选项14下一步我们创建”联系我们选项”在设计的右上角(logo的相反方向).下载电话图标放置在接近右侧参考线的地方.图层命名为“phoneicon“.选择水平排版工具(T).在图标左侧增加一个电话号码字体Arial,大小20pt颜色#292929
6、.在电话号码下面增加描述性文字,字体:Arial,粗体,大小11pt颜色#595959.3photoshop学习教程www.50jun.com新建页眉15现在我们开始创建顶部区域,新建一个组,命名为”header“.16选择矩形工具(U)新建矩形宽和高分别为1200px*440px.移动此图行到矩形,导航栏1px的地方命名为”headerbg“.双击“headerbg”层,选择渐变图层样式增加渐变颜色(左:#2e2226,右:#7a7556).如下图所示.17使用矩形工具新建一个新的矩形(U)大小为960px*360px.移动到距离
7、”headerbg”层顶端40px,距离左边参考线0px的地方.命名图层为”headercontainer“.创建”特色项目”选区4photoshop学习教程www.50jun.com18接着我们准备开始创建”特色项目”选区.在header组里面创建新组,命名为“fp“.选择矩形工具(U)创建大小为630px乘以340px,距离header容器顶部和左侧10px的地方.给图层的颜色赋值为#000000并命名为”fpcontainer“.19从你的ps里导入一张图片放置在特色区域上面.按选择>全部(Ctrl/Cmd+A),然后编辑>复
8、制(Ctrl/Cmd+C).继续回到我们的网页设计.在”fpcontainer”层上面新建图层,点编辑>粘贴(Ctrl/Cmd+V)粘贴你的特色项目图片.重命名为”fpimage“.右击”fpimage”层选择剪切蒙版.现在图片只有在
