使用Photoshop打造一个企业网站首页设计制作全
qp3db 人气:0先整理好需要做的内容至一个文件夹中。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266379.jpg)
打开photoshop新建一个空白面板。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266380.jpg)
选择矩形工具绘制一个980*auto的图形。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266381.jpg)
结果如下:
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266382.jpg)
使用选择工具点击边缘节点。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266383.jpg)
在菜单栏下方可看见图片的宽与高。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266384.jpg)
点击背景
图层,再按下shift键点击新建的图层。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266385.jpg)
按下选择快捷键"V",在菜单栏下方会出现对齐选项。选择居中对齐。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266386.jpg)
从标尺区域按下鼠标向右拖动会形成一根辅助线。拖至矩形边缘自动吸附即可。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266387.jpg)
我们可以看见的结果如下:
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266388.jpg)
在图层面板新建header文件夹,并把logo放置进来。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266389.jpg)
在header文件夹下建立menus目录,并绘制一个矩形图形。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266390.jpg)
为矩形图形添加渐变。(或者双击图层空白处也可以编辑效果)
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266391.jpg)
所开启的面板:
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266392.jpg)
描边参数如下:
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266393.jpg)
渐变效果如下:
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266394.jpg)
设置内发光,参数如下:
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266395.jpg)
菜单导航背景最终效果。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266396.jpg)
打上文本。文本选择工具快捷键"T"。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266397.jpg)
把最左侧的文本吸附在左侧辅助线上。(按住shift拖拽)
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266398.jpg)
把最右侧的文字吸附在右侧辅助线上。(按住shift键拖拽)
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266399.jpg)
选择所添加的导航文本图层。(点击第一个,按住shift点击最后一个。)
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266400.jpg)
点击水平居中对齐。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266401.jpg)
整体文本效果就对齐了。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266402.jpg)
新建一个文件夹,用来存放导航栏上方空白处的内容。我们写上热线电话。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266403.jpg)
选择铅笔工具吧,一起来手绘下。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266404.jpg)
放大面板,画了一个小电话。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266405.jpg)
看看右上角的效果。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266406.jpg)
在menus下新建一个图层。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266407.jpg)
使用铅笔 按住shift绘制两条竖线。一条为深,一条为浅。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266408.jpg)
使用快捷键,ctrl+j 复制刚才所绘制的图层
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266409.jpg)
选择第一个绘制的结果以及第一个与第二菜单,使用对齐工具对齐。
选择最后一个铅笔绘制的竖线,同样选择左右两侧的文本使用对齐工具对齐。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266410.jpg)
初步看见的效果。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266411.jpg)
选择所有的铅笔绘制的竖线,使用快捷键ctrl+e合并图层。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266412.jpg)
使用套索工具,设置余羽化像数。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266413.jpg)
选择上下边缘,使用delete键删除达到羽化效果。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266414.jpg)
最后完成后的导航。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266415.jpg)
绘制一个鼠标经过的效果矩形给该矩形添加渐变及描边,内发光。(根据自己需求)。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266416.jpg)
新建banner文件夹,并在里面绘制一个满屏,高度为350px(根据情况而定)的矩形。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266417.jpg)
使用矩形选择工具选择在辅助线内的banner实际大小。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266418.jpg)
在图层面板使用蒙板针对该文件夹做遮罩。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266419.jpg)
在蒙板文件夹下新建一个椭圆形状。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266420.jpg)
给该形状做滤镜-模糊效果。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266421.jpg)
选择滤镜的参数如下:
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266422.jpg)
按下V快捷键,将该效果的大小边缘控制在实际辅助线内。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266423.jpg)
所看到的初步效果。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266424.jpg)
在实际banner区域增加文本效果,效果根据需求而定。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266425.jpg)
使用钢笔绘制任意图形做辅助效果。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266426.jpg)
新建一个center文件夹,同时在center文件夹内的元素也需要分文件夹。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266427.jpg)
绘制一个与banner区分的过渡矩形,调整它的色彩及效果。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266428.jpg)
添加栏目如:(关于我们)
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266429.jpg)
在栏目名称处可以做效果,如先绘制一个任意图形。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266430.jpg)
给该图形做模糊处理。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266431.jpg)
参数如下:
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266432.jpg)
初步看见的结果。或者按下ctrl键点击该图,把该图层载入选区,并新建图层。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266433.jpg)
选择渐变工具。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266434.jpg)
调整渐变色彩。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266435.jpg)
调整参数如下:
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266436.jpg)
使用渐变工具对载入选出做色彩填充。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266437.jpg)
如果觉得色彩不满意,可以通过色相饱和度修改。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266438.jpg)
调整参数如下:
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266439.jpg)
新建其他栏目如:(服务中心)
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266440.jpg)
在文本前面绘制标注符,同样可以使用对齐工具排列。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266441.jpg)
合并后的标注符,可以为其修改颜色。使用颜色叠加即可。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266442.jpg)
同时绘制其他栏目,布局大致完成。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266443.jpg)
绘制copyright区域。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266444.jpg)
选择直线来分割上下的模块。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266445.jpg)
由于面板较高,多余部分可以选择裁剪工具处理。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266446.jpg)
裁剪:先选择整个画板,然后将下方高度缩减。黑色区域的部分选择删除。
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266447.jpg)
最后的效果!
![bbs.16xx8.com](https://img.qb5200.com/download-x/20201127/266448.jpg)
加载全部内容