|
|
在本教程我们将新建一个ps模样可以应用在Joomla, Wordpress or Drupal上.
请注意在本教程我将展示如何在photoshop创建模板但未涉及转化成 CSS/HTML部分. 总之无论如何 psd 转 CSS/HTML 部分我会尽快的公布在我们的网站上面的.
最后效果预览:
废话不多说,开始动手吧!
打开ps并且新建文档 (Ctrl + C).
前景色为 #fcf8bc
步骤 1 ? 创建Logo和导航
首先我选择矩形工具在文档的顶部新建矩形
然后我选择横向排版工具写上PSD ? Coder.com和一句口号. (请注意,暂时来说使用什么颜色不重要). 对于 “PSD”字体部分 我选择了Ariapenciroman字体而Coder.com 和口号部分我选择tahoma 字体.
下一步我选择矩形工具增加一些图形(在“PSD” 层的下面). 在一次重申,颜色并不重要?我使用红色的.
现在能看到简单的效果了, 请应用以下图层样式:
上一步创建的图形应用样式如下:
我的结果
对于PSD文字, 应用下面样式:
对于 Coder.com应用如下样式:
对于口号, 我将颜色更改为# 0b8c8f
这是 logo的最后结果
接下来我将创建导航栏.
使用排版工具添加如下链接
对于“Home”文字应用以下设置:
至于其他的链接样式设置如下:
步骤2 ? 创建专题区域
首先我选择矩形工具增加下列形状(尺寸: 950px乘以 332px). 颜色: # cacf43
接下来应用如下样式:
接下来我会选择上期教程的图片. 使用自由变形工具 (Ctrl + T)调整图片尺寸
然后使用矩形选区工具去除图片的一小部分
现在使用椭圆形工具绘制下列图形(在图片背后)
应用一个高斯模糊(滤镜>模糊>高斯模糊)
半径 30.8 px
再一次选择矩形工具绘制如下选区
接着按下键盘上的“Delete”键删除选区内部分. 得到如下阴影
接着使用排版工具添加内容
接着应用如下样式:
我得到的结果
再一次使用排版工具增加more文字
下面是我得到的结果
在这个区域,我想增加一些幻灯片放映, 用来展示我的作品, 这也是我要在幻灯片两边增加切换箭头的原因了.
为了创建箭头,我将使用椭圆工具新建如下形状
开始应用样式:
然后选择多边形工具创建如下图形:
应用如下样式
右边的图形也是同样的办法
得到结果如下:
接下来我选择矩形工具增加如下图形. 使用如下颜色: # 0b8c8f
然后应用图层样式:
现在我将使用椭圆形工具创建2 个白色的图形 (请看截图)
每一边应用高斯模糊工具 (滤镜>模糊>高斯模糊) 半径设置为 78px. 在矩形上面创建了一个非常光滑和漂亮的渐变效果.
增加一些文字进去
现在请注意我将应用某些相同的图层样式.
对于标题 “Why to choose us”应用样式如下:
我的结果
白色文字的样式:
我的结果:
现在使用矩形工具我就增加两个矩形(白色)
其中的一个矩形样式如下:
我的结果
现在我选择垂直排版工具在矩形上增添文字
我将增加更多的文字内容应用相同的样式
我得到的结果
下面准备制作内容区域. 在一次选择矩形工具创建矩形(白色)
这里学习专题区域的最后一步:如何创建3D触感
使用钢笔工具创建简单图形. 使用颜色: # 146a6c
在右边同样创建简单形状.
专题区域得到的结果
步骤3 创建内容区域
这一步事实上很容易. 使用排版工具增加一些文字并且插入图片
使用矩形工具创建2 个图形:
每一个图形的样式如下:
这是我内容区域得到的结果:
步骤 4 ? 创建页脚
选择矩形工具创建矩形部分(使用颜色: #2b2825)
接下来使用钢笔新建如下图形, 首先在左边部分:
创建另一个在右边. 下面是我的结果:
最后一步我将增加一些文本,并且增加一个 “通讯表格”. 下面是我的页脚结果:
为了创建黄色按钮我选择了矩形工具新建矩形, 并且应用样式如下:
下面是本教程的最终结果.
|
|
窥视卡
雷达卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡