您现在的位置: 破洛洛 >> 建站学院 >> 平面设计 >> Photoshop >> PS网页设计 >> 正文

Photoshop设计简洁风格企业首页模板教程

作者:qp3db 来源:蓝色理想 更新时间:2012-6-6
分享到

显看看效果图

Photoshop设计简洁风格企业首页模板,破洛洛

先整理好需要做的内容至一个文件夹中。

Photoshop设计简洁风格企业首页模板,破洛洛

打开photoshop新建一个空白面板。

Photoshop设计简洁风格企业首页模板,破洛洛

选择矩形工具绘製一个980*auto的图形。

Photoshop设计简洁风格企业首页模板,破洛洛

结果如下:

Photoshop设计简洁风格企业首页模板,破洛洛

使用选择工具点击边缘节点。

Photoshop设计简洁风格企业首页模板,破洛洛

在菜单栏下方可看见图片的宽与高。

Photoshop设计简洁风格企业首页模板,破洛洛

点击背景

图层,再按下shift键点击新建的图层。

Photoshop设计简洁风格企业首页模板,破洛洛

按下选择快捷键"V",在菜单栏下方会出现对齐选项。选择居中对齐。

Photoshop设计简洁风格企业首页模板,破洛洛

从标尺区域按下鼠标向右拖动会形成一根辅助线。拖至矩形边缘自动吸附即可。

Photoshop设计简洁风格企业首页模板,破洛洛

我们可以看见的结果如下:

Photoshop设计简洁风格企业首页模板,破洛洛

在图层面板新建header文件夹,并把logo放置进来。

Photoshop设计简洁风格企业首页模板,破洛洛

在header文件夹下建立menus目录,并绘製一个矩形图形。

Photoshop设计简洁风格企业首页模板,破洛洛

爲矩形图形添加渐变。(或者双击图层空白处也可以编辑效果)

Photoshop设计简洁风格企业首页模板,破洛洛

所开啓的面板:

Photoshop设计简洁风格企业首页模板,破洛洛

描边参数如下:

Photoshop设计简洁风格企业首页模板,破洛洛

渐变效果如下:

Photoshop设计简洁风格企业首页模板,破洛洛

设置内发光,参数如下:

Photoshop设计简洁风格企业首页模板,破洛洛

菜单导航背景最终效果。

Photoshop设计简洁风格企业首页模板,破洛洛

打上文本。文本选择工具快捷键"T"。

Photoshop设计简洁风格企业首页模板,破洛洛

把最左侧的文本吸附在左侧辅助线上。(按住shift拖拽)

Photoshop设计简洁风格企业首页模板,破洛洛

把最右侧的文字吸附在右侧辅助线上。(按住shift键拖拽)

Photoshop设计简洁风格企业首页模板,破洛洛

选择所添加的导航文本图层。(点击第一个,按住shift点击最后一个。)

Photoshop设计简洁风格企业首页模板,破洛洛

点击水平居中对齐。

Photoshop设计简洁风格企业首页模板,破洛洛

整体文本效果就对齐了。

Photoshop设计简洁风格企业首页模板,破洛洛

新建一个文件夹,用来存放导航栏上方空白处的内容。我们写上热线电话。

Photoshop设计简洁风格企业首页模板,破洛洛

选择铅笔工具吧,一起来手绘下。

Photoshop设计简洁风格企业首页模板,破洛洛

放大面板,画了一个小电话。

Photoshop设计简洁风格企业首页模板,破洛洛

看看右上角的效果。

Photoshop设计简洁风格企业首页模板,破洛洛

在menus下新建一个图层。

Photoshop设计简洁风格企业首页模板,破洛洛

使用铅笔 按住shift绘製两条竖线。一条爲深,一条爲浅。

Photoshop设计简洁风格企业首页模板,破洛洛

使用快捷键,ctrl+j 復製刚才所绘製的图层

Photoshop设计简洁风格企业首页模板,破洛洛

选择第一个绘製的结果以及第一个与第二菜单,使用对齐工具对齐。

选择最后一个铅笔绘製的竖线,同样选择左右两侧的文本使用对齐工具对齐。

Photoshop设计简洁风格企业首页模板,破洛洛

初步看见的效果。

Photoshop设计简洁风格企业首页模板,破洛洛

选择所有的铅笔绘製的竖线,使用快捷键ctrl+e合并图层。

Photoshop设计简洁风格企业首页模板,破洛洛

使用套索工具,设置余羽化像数。

Photoshop设计简洁风格企业首页模板,破洛洛

选择上下边缘,使用delete键删除达到羽化效果。

Photoshop设计简洁风格企业首页模板,破洛洛

最后完成后的导航。

Photoshop设计简洁风格企业首页模板,破洛洛

绘製一个鼠标经过的效果矩形给该矩形添加渐变及描边,内发光。(根据自己需求)。

Photoshop设计简洁风格企业首页模板,破洛洛

新建banner文件夹,并在裡面绘製一个满屏,高度爲350px(根据情况而定)的矩形。

Photoshop设计简洁风格企业首页模板,破洛洛

使用矩形选择工具选择在辅助线内的banner实际大小。

Photoshop设计简洁风格企业首页模板,破洛洛

在图层面板使用蒙板针对该文件夹做遮罩。

Photoshop设计简洁风格企业首页模板,破洛洛

在蒙板文件夹下新建一个椭圆形状。

Photoshop设计简洁风格企业首页模板,破洛洛

给该形状做滤镜-模煳效果。

Photoshop设计简洁风格企业首页模板,破洛洛

选择滤镜的参数如下:

Photoshop设计简洁风格企业首页模板,破洛洛

按下V快捷键,将该效果的大小边缘控製在实际辅助线内。

Photoshop设计简洁风格企业首页模板,破洛洛

所看到的初步效果。

Photoshop设计简洁风格企业首页模板,破洛洛

在实际banner区域增加文本效果,效果根据需求而定。

Photoshop设计简洁风格企业首页模板,破洛洛

使用钢笔绘製任意图形做辅助效果。

Photoshop设计简洁风格企业首页模板,破洛洛

新建一个center文件夹,同时在center文件夹内的元素也需要分文件夹。

Photoshop设计简洁风格企业首页模板,破洛洛

绘製一个与banner区分的过渡矩形,调整它的色彩及效果。

Photoshop设计简洁风格企业首页模板,破洛洛

添加栏目如:(关于我们)

Photoshop设计简洁风格企业首页模板,破洛洛

在栏目名称处可以做效果,如先绘製一个任意图形。

Photoshop设计简洁风格企业首页模板,破洛洛

给该图形做模煳处理。

Photoshop设计简洁风格企业首页模板,破洛洛

参数如下:

Photoshop设计简洁风格企业首页模板,破洛洛

初步看见的结果。或者按下ctrl键点击该图,把该图层载入选区,并新建图层。

Photoshop设计简洁风格企业首页模板,破洛洛

选择渐变工具。

Photoshop设计简洁风格企业首页模板,破洛洛

调整渐变色彩。

Photoshop设计简洁风格企业首页模板,破洛洛

调整参数如下:

Photoshop设计简洁风格企业首页模板,破洛洛

使用渐变工具对载入选出做色彩填充。

Photoshop设计简洁风格企业首页模板,破洛洛

如果觉得色彩不满意,可以通过色相饱和度修改。

Photoshop设计简洁风格企业首页模板,破洛洛

调整参数如下:

Photoshop设计简洁风格企业首页模板,破洛洛

新建其他栏目如:(服务中心)

Photoshop设计简洁风格企业首页模板,破洛洛

在文本前面绘製标註符,同样可以使用对齐工具排列。

Photoshop设计简洁风格企业首页模板,破洛洛

合并后的标註符,可以爲其修改颜色。使用颜色叠加即可。

Photoshop设计简洁风格企业首页模板,破洛洛

同时绘製其他栏目,布局大致完成。

Photoshop设计简洁风格企业首页模板,破洛洛

绘製copyright区域。

Photoshop设计简洁风格企业首页模板,破洛洛

选择直线来分割上下的模块。

Photoshop设计简洁风格企业首页模板,破洛洛

由于面板较高,多余部分可以选择裁剪工具处理。

Photoshop设计简洁风格企业首页模板,破洛洛

裁剪:先选择整个画板,然后将下方高度缩减。黑色区域的部分选择删除。

Photoshop设计简洁风格企业首页模板,破洛洛

最后的效果!

Photoshop设计简洁风格企业首页模板,破洛洛

转载请注明:破洛洛(谢谢合作)
网友评论: