IT软件公司网站界面设计步骤

ps网页设计 Photoshop网站界面设计

对于IT或软件公司网站来说，清爽与专业是主要表现风格，

虽然从表面上看这款网页界面并没有什么花哨之处，但整体效果很不错，这也软件公司所要表现的主题十分贴切。

创建文档

新建文档,大小1200 x 1200 像素,背景为白色. 设置你的前景色为#d6d6d6 背景色味#efefef 然后选择渐变工具设置线性渐变.

ps网页设计 Photoshop网站界面设计

从画布顶端开始拖动渐变

, 线性渐变大概有 250 – 300 像素.

创建页眉

选择矩形选区工具, 拉出宽度跟画布相同高度大概160-170像素的选区.

ps网页设计 Photoshop网站界面设计

在填充选区之前设置你的前景色为 #483f38 背景色为

#1e1916. 选择渐变工具

,

这次选择对称渐变.

在矩形的中间拉出对称渐变. 一旦你填充了矩形,点击“滤镜 >杂色> 添加杂色”为它增加杂点.

ps网页设计 Photoshop网站界面设计

创建模板题目

使用横向排版工具在矩形内部加上网站的标题和口号

.

接着 为标题添加阴影使用下面设置.

ps网页设计 Photoshop网站界面设计

为标题的其中一个单词添加渐变叠加

.

ps网页设计 Photoshop网站界面设计

你将会看到

.

创建小型的导航栏

ps网页设计 Photoshop网站界面设计

选择圆角矩形工具

,半径设置为

10px.

在页眉矩形的右侧拉出小型的圆角矩形.

现在为你的圆角矩形增加图层样式.

ps网页设计 Photoshop网站界面设计

ps网页设计 Photoshop网站界面设计

在矩形内加入文字连接

, 看起来应该是这样的.

创建主要导航栏

在你使用圆角矩形工具创建主要导航栏之前,先选择矩形选区工具各增加一条高度为1px的线.在顶部的线颜色为黑色,底部的线颜色为黑色. 放置两条线在页眉矩形的底部.

ps网页设计 Photoshop网站界面设计

使用圆角矩形工具拖出矩形

, 使矩形在页面和背景的中央位置.

为你的导航增加以下样式.

ps网页设计 Photoshop网站界面设计

ps网页设计 Photoshop网站界面设计

在主要导航里面新建一个圆角矩形. 该矩形的颜色为白色,

大小为主要矩形的一半或

者更小.

设置小矩形的透明度为 5%. 下一步你将要学会如何创建自定义图案.

新建 25 x 25 像素的文档, 放大之后选择铅笔工具. 使用铅笔工具,颜色为黑色临摹以下图片.

ps网页设计 Photoshop网站界面设计

当你创建好图案选择

“编辑 >

定义图案”, 保存自定义图案,命名为“对角线”. 回到你原始的画布然后载入主要导航矩形. 你可以在图层面板选择图层然后点击,”选择>载入选区”.当你载入选区之后新建图层选择油漆桶工具填充选区(不要忘记加油漆桶选项设置为图案). 最后将图层的透明度设置为1%.

创建搜索框

使用横向排版工具增加导航项目组, 在右边我们将增加搜索框. 使用圆角矩形工具,半径设置为5px在右侧的空白处创建矩形.

ps网页设计 Photoshop网站界面设计

为搜索框增加图层样式

.

ps网页设计 Photoshop网站界面设计

在你的搜

ps网页设计 Photoshop网站界面设计

在你的搜索区域加入文字和右侧的小图标

. 我从自定义图案库选择了小型的放大镜

.

创建焦点区域

在主要导航的下面我们将创建焦点区域用了展示产品. 开始选择文字工具增加漂亮的标题和一段文字.

在文字的右侧创建你的产品盒子. 在本教程,我只需要一个空间的软件图片. 你可以花更多的时间去自定义你的软件盒子, 或者简单使用以上提供的图片.