我们可以利用ps来制作一个简单的網页
下面是小编为大家整理的ps制作网页效果图教程,仅供大家参考~
ps制作网页效果图教程
先让我们看看待会即将完成的网页.
5 现在我们开始創建LOGO. logo只是添加的应用颜色渐变效果所以很简单. 创建新的组 (图层> 新建 >组)并且命名为"logo".
6 选择横向排版工具 (T)切换到大写字母 键入"SMASHING" (或者你网站的名字) .
7 進入字符面板, 设置字体为Arial, 样式为粗体,大小为 42pt. 设置反锯齿选项为锐利颜色为#101112. 你同样可以在激活文字工具之后在工具栏更改.
8 双击打开图层面板對话框. 选择图层渐变, 点击渐变设置如下图显示设置.
10 选择水平排版工具(T)在logo下面增加口号.
12 创建新组命名为"navigation",置于 "logo" 组上方. 从顶部标尺拖出一条参考線, 直到距离画布顶端150px 的地方. 选择矩形工具(U)画出一直宽度为4px 的水平线,颜色为#e3ab27, 贯穿画布.
13 增加导航链接文字,距离水平线 12px高距离左侧参考线 20px. 选择椭圓形工具画一个宽高分别为 72px *35px的矩形. 移动此图层到 "hover"下面. 使用转换点工具拉直底部圆角. 双击"hover"图层按钮打开图层样式对话框增加渐变颜色(左: #e5ad27, 右: #b27625).选擇横向排版工具(T), 选中文字, "Home" 更改颜色#ffffff
创建 "特色项目" 选区
25 下一个步骤我们将会复制之前制作的另外一个图层的样式.进入"navigation" 组, 右击"hover"层, 选择复制图层樣式, 回到"qq container" 层,右击选择粘贴图层样式.
26 选择水平排版工具. 键入 "Quick Quote"在"qq container" 距离内容层顶部和左边 20px的地方. 设置字体为Trebuchet MS (或者其他web保险字体) 颜色为白色(#ffffff) 反锯齿選项设置为锐利. 我们将使用椭圆形工具创建表单. 选择椭圆形工具,设置半径为 3px. 然后新建两个矩形大小为260px乘以 35px 颜色为白色
36 在面板选中三个组,点擊图层>分布> 水平中心分布.
41 重复26步增加表单和标签.
43 重复28步创建按钮.
28 双击图层打开图层样式对话框 ,勾选左边的渐变叠加对话框. 点击渐变编辑按照如下变更颜色 .
30 在工具面板选择移动工具 在选项条设置水平居中和垂直居中.
33 紧靠描述的地方我们将增加多一个正方形. 选择矩形工具,颜色 #ffffff, 按住Shift键,维持比例绘制矩形,大小为88px 乘以88px. 移动该矩形到距离左边矩形("c01′).10px 的地方,命名为"border". 设置描边如下:
21 现在我们开始为特色区域图片创建标题和描述.選择矩形工具(U)创建矩形大小为630px乘以 90px,颜色为#161718. 改变图层不透明度为90% 命名为"title bg". 如下放置图片.
23 根据以下所示,设置矩形内的标题和描述.
14 下一步我们创建"聯系我们选项" 在设计的右上角( logo的相反方向). 将电话图标 放置在接近右侧参考线的地方.图层命名为 "phone icon". 选择水平排版工具(T). 在图标左侧增加一个电话號码字体 Arial, 大小20pt 颜色#292929.
15 现在我们开始创建顶部区域,新建一个组,命名为"header".
2 确保你使用像素为单位, 它是网页设计的标准尺度. 从前置选项的windows对话框设置標尺 (Ctrl/Cmd + K); 点击单位和标尺,确保你所有的设置跟下图相同.
3 激活photoshop的标尺,从查看 > 标尺里头. 按下"Ctrl/Cmd + R"固定标尺的可见度. 也可以通过打开窗口> 信息 (快捷键: F8). 通过選区工具,信息面板可以反馈不是有用的信息. 按下"M"字键,
选择矩形选区工具在画布的左上角绘制出一个120px宽的小盒子.你可以调整选区的大小通过信息面板.现在从左边开始,根据面板显示的宽度拖动参考线到如图的选区右侧.
4 移动选区到画布的右边缘. 分配另外一条参考线到选区左侧.
你的畫布看起来应该是这样的: