开启左侧

一个简约首页的设计过程全步骤教程(一百个动作内搞定一个设计稿

[复制链接]
发表于 2012-2-15 01:10:18 | 显示全部楼层 |阅读模式
源件下载:
蓝色风格: 16530353rbyxx39o3xgtx3.gif test blue.rar(193.42 K)
教程风格:test.rar(447.41 K)


1.jpg(53.75 K)先整理好需要做的内容至一个文件夹中。(2011-11-22 17:29:46 上传)


2.jpg(31.73 K)打开photoshop新建一个空白面板。(2011-11-22 17:29:46 上传)


3.jpg(36.46 K)选择矩形工具绘制一个980*auto的图形。(2011-11-22 17:29:46 上传)


4.jpg(9.37 K)结果如下:(2011-11-22 17:29:46 上传)


5.jpg(14.15 K)使用选择工具点击边缘节点。(2011-11-22 17:29:46 上传)


6.jpg(27.04 K)在菜单栏下方可看见图片的宽与高。(2011-11-22 17:29:46 上传)


7.jpg(11.4 K)点击背景图层,再按下shift键点击新建的图层。(2011-11-22 17:29:46 上传)


8.jpg(27.5 K)按下选择快捷键"V",在菜单栏下方会出现对齐选项。选择居中对齐。(2011-11-22 17:29:46 上传)


9.jpg(42.78 K)从标尺区域按下鼠标向右拖动会形成一根辅助线。拖至矩形边缘自动吸附即可。(2011-11-22 17:29:46 上传)


10.jpg(24.19 K)我们可以看见的结果如下:(2011-11-22 17:29:46 上传)


11.jpg(92.4 K)在图层面板新建header文件夹,并把logo放置进来。(2011-11-22 17:29:46 上传)


12.jpg(98.96 K)在header文件夹下建立menus目录,并绘制一个矩形图形。(2011-11-22 17:29:46 上传)


13.jpg(107.22 K)为矩形图形添加渐变。(或者双击图层空白处也可以编辑效果)(2011-11-22 17:29:46 上传)


14.jpg(44.69 K)所开启的面板:(2011-11-22 17:29:46 上传)


16.jpg(43.66 K)描边参数如下:(2011-11-22 17:29:46 上传)


15.jpg(39.63 K)渐变效果如下:(2011-11-22 17:29:46 上传)


17.jpg(53.85 K)设置内发光,参数如下:(2011-11-22 17:29:46 上传)


18.jpg(101.66 K)菜单导航背景最终效果。(2011-11-22 17:29:46 上传)


19.jpg(78.66 K)打上文本。文本选择工具快捷键"T"。(2011-11-22 17:29:46 上传)


20.jpg(12.18 K)把最左侧的文本吸附在左侧辅助线上。(按住shift拖拽)(2011-11-22 17:29:46 上传)


21.jpg(5.61 K)把最右侧的文字吸附在右侧辅助线上。(按住shift键拖拽)(2011-11-22 17:29:46 上传)


22.jpg(35.69 K)选择所添加的导航文本图层。(点击第一个,按住shift点击最后一个。)(2011-11-22 17:29:46 上传)


23.jpg(13.41 K)点击水平居中对齐。(2011-11-22 17:29:46 上传)


24.jpg(82.06 K)整体文本效果就对齐了。(2011-11-22 17:29:46 上传)


25.jpg(19.25 K)新建一个文件夹,用来存放导航栏上方空白处的内容。我们写上热线电话。(2011-11-22 17:29:46 上传)


26.jpg(12.43 K)选择铅笔工具吧,一起来手绘下。(2011-11-22 17:29:46 上传)


27.jpg(6.75 K)放大面板,画了一个小电话。(2011-11-22 17:29:46 上传)


28.jpg(9.86 K)看看右上角的效果。(2011-11-22 17:29:46 上传)


29.jpg(35.56 K)在menus下新建一个图层。(2011-11-22 17:29:46 上传)


30.jpg(137.16 K)使用铅笔 按住shift绘制两条竖线。一条为深,一条为浅。(2011-11-22 17:29:46 上传)


31.jpg(39.8 K)使用快捷键,ctrl+j 复制刚才所绘制的图层(2011-11-22 17:29:46 上传)


32.jpg(126.88 K)选择第一个绘制的结果以及第一个与第二菜单,使用对齐工具对齐。(2011-11-22 17:29:46 上传)


33.jpg(125.69 K)选择最后一个铅笔绘制的竖线,同样选择左右两侧的文本使用对齐工具对齐。(2011-11-22 17:29:46 上传)


34.jpg(81.85 K)初步看见的效果。(2011-11-22 17:29:46 上传)


35.jpg(19.6 K)选择所有的铅笔绘制的竖线,使用快捷键ctrl+e合并图层。(2011-11-22 17:29:46 上传)


36.jpg(24.83 K)使用套索工具,设置余羽化像数。(2011-11-22 17:29:46 上传)


37.jpg(90.61 K)选择上下边缘,使用delete键删除达到羽化效果。(2011-11-22 17:29:46 上传)


38.jpg(79.36 K)最后完成后的导航。(2011-11-22 17:29:46 上传)


39.jpg(79.5 K)绘制一个鼠标经过的效果矩形给该矩形添加渐变及描边,内发光。(根据自己需求)。(2011-11-22 17:29:46 上传)


40.jpg(108.15 K)新建banner文件夹,并在里面绘制一个满屏,高度为350px(根据情况而定)的矩形。(2011-11-22 17:29:46 上传)


41.jpg(93.76 K)使用矩形选择工具选择在辅助线内的banner实际大小。(2011-11-22 17:29:46 上传)


42.jpg(22.44 K)在图层面板使用蒙板针对该文件夹做遮罩。(2011-11-22 17:29:46 上传)


43.jpg(114.56 K)在蒙板文件夹下新建一个椭圆形状。(2011-11-22 17:29:46 上传)


44.jpg(126.86 K)给该形状做滤镜-模糊效果。(2011-11-22 17:29:46 上传)


45.jpg(16.49 K)选择滤镜的参数如下:(2011-11-22 17:29:46 上传)


46.jpg(108.13 K)按下V快捷键,将该效果的大小边缘控制在实际辅助线内。(2011-11-22 17:29:46 上传)


47.jpg(81.6 K)所看到的初步效果。(2011-11-22 17:29:46 上传)


48.jpg(118.1 K)在实际banner区域增加文本效果,效果根据需求而定。(2011-11-22 17:29:46 上传)


49.jpg(121.99 K)使用钢笔绘制任意图形做辅助效果。(2011-11-22 17:29:46 上传)


50.jpg(16.9 K)新建一个center文件夹,同时在center文件夹内的元素也需要分文件夹。(2011-11-22 17:29:46 上传)


51.jpg(102.44 K)绘制一个与banner区分的过渡矩形,调整它的色彩及效果。(2011-11-22 17:29:46 上传)


52.jpg(134.48 K)添加栏目如:(关于我们)(2011-11-22 17:29:46 上传)


53.jpg(46.09 K)在栏目名称处可以做效果,如先绘制一个任意图形。(2011-11-22 17:29:46 上传)


54.jpg(34.58 K)给该图形做模糊处理。(2011-11-22 17:29:46 上传)


55.jpg(27.58 K)参数如下:(2011-11-22 17:29:46 上传)


56.jpg(55.79 K)初步看见的结果。或者按下ctrl键点击该图,把该图层载入选区,并新建图层。(2011-11-22 17:29:46 上传)


57.jpg(38.05 K)选择渐变工具。(2011-11-22 17:29:46 上传)


58.jpg(24.88 K)调整渐变色彩。(2011-11-22 17:29:46 上传)


59.jpg(39.09 K)调整参数如下:(2011-11-22 17:29:46 上传)


60.jpg(133.04 K)使用渐变工具对载入选出做色彩填充。(2011-11-22 17:29:46 上传)


61.jpg(63.01 K)如果觉得色彩不满意,可以通过色相饱和度修改。(2011-11-22 17:29:46 上传)


62.jpg(25.81 K)调整参数如下:(2011-11-22 17:29:46 上传)


63.jpg(165.4 K)新建其他栏目如:(服务中心)(2011-11-22 17:29:46 上传)


64.jpg(180.38 K)在文本前面绘制标注符,同样可以使用对齐工具排列。(2011-11-22 17:29:46 上传)


65.jpg(36.75 K)合并后的标注符,可以为其修改颜色。使用颜色叠加即可。(2011-11-22 17:29:46 上传)


66.jpg(152.54 K)同时绘制其他栏目,布局大致完成。(2011-11-22 17:29:46 上传)


67.jpg(133.89 K)绘制copyright区域。(2011-11-22 17:29:46 上传)


68.jpg(21.07 K)选择直线来分割上下的模块。(2011-11-22 17:29:46 上传)


69.jpg(131.39 K)由于面板较高,多余部分可以选择裁剪工具处理。(2011-11-22 17:29:46 上传)


70.jpg(113.78 K)裁剪:先选择整个画板,然后将下方高度缩减。黑色区域的部分选择删除。(2011-11-22 17:29:46 上传)


71.jpg(133.47 K)最后效果。(2011-11-22 17:29:46 上传)
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
发表于 2012-2-15 01:10:20 | 显示全部楼层
新手学习了 不知道楼主还有教程吗 或是差不多的网站让我这个新手学习下
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-2-15 01:10:21 | 显示全部楼层
新手学习了 不知道楼主还有教程吗 或是差不多的网站让我这个新手学习下
http://bbs.reaft.com/showforum-17.aspx
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
发表于 2012-2-15 01:10:22 | 显示全部楼层
http://bbs.reaft.com/showforum-17.aspx
谢谢楼主解答 thanks
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
发表于 2012-2-15 01:10:23 | 显示全部楼层
看的有点晕啊,黑的突然就变白的,9-10什么变的
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-2-15 01:10:24 | 显示全部楼层
看的有点晕啊,黑的突然就变白的,9-10什么变的
矩形删除了,绘制该矩形主要是需要一个辅助范围而已。
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
发表于 2012-2-15 01:10:26 | 显示全部楼层
矩形删除了,绘制该矩形主要是需要一个辅助范围而已。
好的谢谢,鼠标经过变红色的又是什么弄出来的
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
发表于 2012-2-15 01:10:27 | 显示全部楼层
强大,回去重复下操作
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-2-15 01:10:29 | 显示全部楼层
好的谢谢,鼠标经过变红色的又是什么弄出来的
在文本下方新建一个矩形(或者其他所需形状)形状,增加颜色渐变效果即可。渐变方法为:四色渐变(具体可下载PSD研究色彩的分布)。
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
发表于 2012-2-15 01:10:31 | 显示全部楼层
非常好的教程啊!~ smile.gif
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

 
QQ在线咨询
售前咨询热线
0532-88371356
售后服务微信
pingduwangzhan
快速回复 返回顶部 返回列表