PS设计教程整洁的具有现代气息的web站点.docx
- 文档编号:13868176
- 上传时间:2023-06-18
- 格式:DOCX
- 页数:24
- 大小:903.01KB
PS设计教程整洁的具有现代气息的web站点.docx
《PS设计教程整洁的具有现代气息的web站点.docx》由会员分享,可在线阅读,更多相关《PS设计教程整洁的具有现代气息的web站点.docx(24页珍藏版)》请在冰点文库上搜索。
PS设计教程整洁的具有现代气息的web站点
PS设计教程:
整洁的具有现代气息的web站点
这个Photoshopweb设计的教程中,我们将学习设计一个整洁的具有现代气息的web站点。
这是设计和HTML/CSS模板转换系列教程的第一部分。
∙第一部分:
用Photoshop设计一个小型、现代的产品主页
∙第二部分:
将小型、现代的产品主页由psd转换成XHTML/CSS模板
预览
以下是我们将要一些设计的页面预览,点击图片可以放大。
建立一个新的Photoshop文档
1首先在Photoshop中新建一个文档(Ctrl+N),大小为1200x1200像素,背景设为透明。
设置头部背景
2使用矩形选定工具在透明的背景上画出一个矩形,矩形大小:
1200px×120px
3使用油漆桶工具(G)用任意颜色填充头部刚才选定区域。
点开图层样式对话框,用以下设置来增加一个渐变叠加效果。
完了,应该出现以下效果:
创建内容部分的背景图层
4现在我们将要创建图层内容区域的第二部分背景。
把前景色设为#00315C,背景色设为#001B32。
选择矩形框选定工具(M)选定剩下的透明图层;选定后,选择渐变工具(G),然后设置渐变类型为径向渐变。
5设定好渐变工具(G)后,从顶部的中间垂直的拖动到画布的4/1大小左右。
添加参考线
6现在我们需要一些参考线保留出宽度为850px的中间内容部分。
选择视图>新建参考线。
在新建参考线对话框中输入175px,取向选择垂直。
这样一个画布左边的参考线就做好了。
7重复6的步骤,创建另外一条垂直参考线,不过这次输入1025px (175px+850px=1025px)。
这样一个850px宽、居中的区域就做好了。
设计头部区域
8选择横排文字工具(T),然后对其左边参考线边沿添加上页面标题和标语。
9在标题文本图层下面创建一个新图层,选定矩形选框工具(M),在头部选取出一个区域。
宽度必须填满1200px,高度大概在60px左右。
10用白色(#FFFFFF)填充(G)选定区域,然后在图层面板中设置透明度为25%。
效果如下。
创建导航
11选择横排文字工具(T),字体大小设定为11-12px左右。
然后在标题和标示右边加入导航文字;没菜单项之间留出等宽的边距。
12在每个菜单项之间使用矩形选框工具(M)做一个1px宽的分割线;长度跨越整个头部。
用#CECECE颜色填充(G)这1px的线条。
效果如下图。
13现在,我们在每个菜单项中加入鼠标悬停动态效果(hover)。
我已经给其中一个菜单项加入颜色表示鼠标悬停时的效果。
使用多边形套索工具(L)按住shift,创建一个三角形,以保证每条线都是直的。
14用#00315C这个颜色填充选定的三角形区域
创建欢迎区域
15选择横排文字工具(T),加入一些欢迎标语;同样左边距紧贴左参考线,然后在上面的页面标题和下面的欢迎文本中留出一定的空间。
文本下面加入4个蓝色的列表图标。
这个图标是 FunctionIconSet 里面的(文件名是circle_blue.png)。
16在欢迎文本的右边将插入一个欢迎图片;我这里使用的是SixRevisions网站界面裁图。
裁剪你的图片,去掉不需要的部分。
图片准备好之后,通过编辑>变换>透视改变图片的视角。
17选择椭圆选框工具,然后在欢迎图片下方画一个椭圆。
18用黑色(#000000)填充(G)椭圆选定区域。
19然后设置区域图层透明度为35%。
20然后使用滤镜>模糊>高斯模糊这个椭圆,设定模糊半径为1到2px。
21把欢迎图片和下面的阴影再复制一份,然后把它们拖动到原图片的下面。
22位置拖动好之后,使用高斯模糊下面的裁图,半径为1px。
创建水平3D分割线
23选择矩形选框工具(M)层叠的创建两个1px的线条;宽度为850px,从左参考线到右参考线。
你可以将两个线条放在同一个图层。
24分别使用颜色#000D19和#003461填充这两个线条。
25选择椭圆选框工具(M)然后在分割线上面画出一个椭圆。
26使用黑色(#000000)填充(G)选定区域,加上2到3px的高斯模糊。
然后使用矩形选框工具删掉分割线上半部分,这样就剩下了半个椭圆。
27将这两个图层合并(Ctrl+E),然后添加一个图层蒙版(点击图层面板上的“添加图层蒙版”按钮)来合并图层。
28使用渐变工具(G),渐变类型为对称渐变,前景色设为白色(#FFFFFF),背景色设置黑色(#000000)。
29拖动对称渐变,从分割线中间向两边拖动,从而产生中间向两边淡入效果。
设计内容区域
30选择横排文字工具(T)在3D分割线下方,右分割线的左边加入任意的文字标题和段落。
31使用圆角矩形工具(U)在内容文本区域的左边创建一个圆角矩形;半径设为10px(默认情况下背景是10px)。
32路径画好之后,选择钢笔工具(P),右击矩形内部,选择建立选区。
33设置前景色为#00315C,背景色为#001B32 ,然后选择渐变工具(G),渐变类型为径向渐变。
34从顶部把渐变拖动到中间,和我们绘制背景方法相同。
效果如下图。
35现在需要给圆角矩形图层加入投影、内阴影和描边的图层样式(双击图层面板上面的图层,打开图层样式对话框)。
设置如下。
36使用多边形套索工具(L),然后在矩形上面做一个三角形的选区。
37剪切并复制选区到一个新图层,一般这样做将会丢失掉选取的图层样式,所以在这之前我们必须给右下角图层重复添加一次样式。
38通过编辑>变换>旋转给边角图层翻转180度;
39加入一些任意文字以完成内容框的绘制。
创建页脚区域
40选择圆角矩形工具(U)在也叫拖动出一个圆角矩形。
41使用任意颜色来填充这个圆角矩形选区,选区加入如下样式的渐变叠加效果。
42最后,加上页脚信息就大功告成了。
完成
谢谢阅读本教程。
下个教程中,我将教大家把该页面转成模板。
下载
∙minimal-mordern-layout.zip (ZIP,1.5MB)
(这个译者的psd文件:
minimal-modern-web-layout_my.zip)
译文出处:
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- PS 设计 教程 整洁 具有 现代 气息 web 站点
![提示](https://static.bingdoc.com/images/bang_tan.gif)