织梦CMS - 轻松建站从此开始!

我的网站

Photoshop制作个人网站模板教程

时间:2011-08-01 15:18来源:思缘 作者:未知 点击:
本文虽然是制作个人网站,但是重点在于制作出比较玄目的3D效果icon图标,大多数国外网站模板都比较重视网站整体中的头部,所以他们的设计更多的花工夫在网站的上半部分

本文虽然是制作个人网站,但是重点在于制作出比较玄目的3D效果icon图标,大多数国外网站模板都比较重视网站整体中的头部,所以他们的设计更多的花工夫在网站的上半部分

先看看效果图

<a href='/design/photoshop/' target='_blank'><u>Photoshop</u></a>制作个人网站模板教程

新建一文件,大小为760x770px,设置前景色为# 292929 ,背景色为#515151 (这里设置的颜色是之后渐变的渐变色)选择矩形工具选框工具绘制如下图区域

<a href='/design/photoshop/' target='_blank'><u>Photoshop</u></a>制作个人网站模板教程

使用渐变工具,从选框底部向上拉一条渐变线

Photoshop制作个人网站模板教程

按ctrl+d取消选框,随后再次使用矩形选框工具绘制如下图区域

Photoshop制作个人网站模板教程

同样用渐变工具填充此区域,完成后ctrl+d取消选框

Photoshop制作个人网站模板教程

你可能会发现两个渐变矩形之前有一条白色线条,我们将绘制一条蓝色线条取代它,使用直线工具,颜色选择#009aff ,在页面上绘制线条覆盖前面的白色线条

Photoshop制作个人网站模板教程

导入一些icon图标

Photoshop制作个人网站模板教程

现在我们将用PS为这些图标制作3D效果

Photoshop制作个人网站模板教程

编辑>变换路径>透视,将图标制作成如图效果

Photoshop制作个人网站模板教程

随后为图标添加图层样式

Photoshop制作个人网站模板教程
Photoshop制作个人网站模板教程
Photoshop制作个人网站模板教程
Photoshop制作个人网站模板教程
Photoshop制作个人网站模板教程
Photoshop制作个人网站模板教程
Photoshop制作个人网站模板教程
Photoshop制作个人网站模板教程
Photoshop制作个人网站模板教程

完成后的效果如下图

Photoshop制作个人网站模板教程

(责任编辑:RGB)
织梦二维码生成器
顶一下
(2)
100%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
栏目列表
推荐内容