作为编码者,美工基础是偏弱的。我们可以参考一些成熟的网页PS教程,提高自身的设计能力。套用一句话,“熟读唐诗三百首,不会作诗也会吟”。

本系列的教程来源于网上的PS教程,都是国外的,全英文的。本人尝试翻译这些优秀的教程。因为翻译能力有限,翻译的细节上还有待推敲,希望广大网友不吝赐教。

约定:

1、本文的软件是Photoshop CS5版本

2、原教程的截图是英文的,本人在重新制作的基础上,重新截了中文版的图

3、原文中有些操作没有给出参数。本人在反复测试的情况下测定了一些参数,以红色的文字显示。有些错误的参数,直接以红色文字显示正确的参数

例如:(90,22,231,77),表示矩形的左上角的坐标是(90,22),宽231,高77

例如:(90,22),表示矩形的左上角的坐标是(90,22),矩形的其他两个参数教程里已经指定

4、在教程的最后会附上本人的心得。有些是对教程中的一些步骤的优化等。

Step 1

步骤1

Create a new document (900X900px).

新建文档(900*900px)

Create a new layer called ‘orange header’. Make a selection that’s 900X450px and fill it with an orange gradient:

新建图层orange header。创建一个900*450px选区,并给它填充一个桔色渐变。用矩形工具创建矩形(0,0,900,450)比较方便,并按照下图添加渐变叠加图层样式

渐变编辑器的颜色: #e37c60、#a42e00

Step 2

步骤2

With your header selection in place create a new layer called ‘header clouds’. Go to filter>render>clouds to fill your header area with clouds. Then change your layer mode to ‘color dodge’ and reduce your opacity to 10%.

利用你头部区域的选区新建图层header clouds。(如果之前是用矩形工具创建矩形,那么这里还得按住Ctrl键单击一下图层面板上的矩形缩略图)点击:滤镜 > 渲染 > 云彩,用云彩填充你的头部区域。然后把你的图层混合模式改为颜色减淡并调整不透明度为10%。

Step 3

步骤3

Now download this great texture set from PSDFAN:Texture Thursday: Damage

现在在PSDFAN上下载下面的纹理

Paste one of the textures into your header selection. Call this layer ‘header texture’.

把其中的一个纹理粘贴到你的头部选区。命名该图层为header texture

Then reduce this layer’s opacity to 20% and change the layer’s blend mode to ‘overlay’.

然后调整该图层的不透明度为20%并改变图层的混合选项为叠加

Step 4

步骤4

Now use your radial gradient tool to create a white to transparent radial gradient in the right area of your header.

现在在你的头部区域的右边用径向渐变工具创建一个白色到透明的径向渐变。也可以用椭圆工具创建一个椭圆(450,0,450,450),填充改为0,如下图添加径向渐变叠加

Then reduce the opacity of this layer to 20% and the layer blend mode to: ‘color dodge’.

然后调整该图层的不透明度为20%,并改图层混合选项为颜色减淡

Step 5

步骤5

Create a new layer called ‘lighting 1′. Use your lasso tool to create a triangular shard like selection in your header. Fill this selection with a white to transparent gradient.

新建图层lighting1。在你的头部区域用套索工具创建一个三角形选区。用白色到透明的渐变填充这个选区

也可用多边形工具,按照Shift,画一个正三角形,填充改为0,按Ctrl+T自由变换,转化为如下图的三角形,并给它添加白色到透明的渐变叠加的图层样式

在该图层上,右键选择“转换为智能对象”,再次右键选择“栅格化图层”。

Then reduce the opacity of this layer to 5% and the layer blend mode to: ‘color dodge’.

然后调整该图层不透明度为5%,并设置图层混合选项为颜色减淡,并调整到合适的位置

Step 6

步骤6

Repeat this technique to create a collection of light shards in your header.

在你的头部区域重复这个技术创建一系列的光影阵列。可以直接复制步骤5的图层,调整到合适的位置和大小即可

Step 7

步骤7

Create a new layer called ‘menu’. Create a 60px high selection at the top of your canvas. Fill it with black, and reduce the opacity of this layer to 40%.

新建图层menu。在你的画布的顶部创建一个高60px的选区(0,0,900,60)。用黑色填充,并调整该图层的不透明度为40%

Then, to create a 1px white line under your menu apply a drop shadow (settings below):

然后,创建一条1px宽的白线(0,60,900,1)(不透明度为40%)在你的菜单的下方,按照下图添加投影。

Step 8

步骤8

Add some menu text, as well as some 1px dividers between the menu items.

添加一些菜单文字,在每两个菜单之间添加一个1px 的分割线(文字和分割线都用白色,文字的不透明度改为80%,分割线的不透明改为40%)

Step 9

步骤9

Download this Macbook Pro vector set

Paste in your Macbook Pro vector, and position it the right half of your header.

下载这个Macbook Pro vector set

粘贴其中的Macbook Pro vector,并摆放到在你的头部区域的右侧

Then apply the following layer blending options to your Macbook Pro layer, including a color overlay, in order to make the laptop blend better with it’s background:

然后按照下图给Macbook Pro图层添加图层样式,包括一个颜色叠加,看起来和背景能更好的配合起来

颜色叠加的颜色: #cc4d00

Step 10

步骤10

Now create a new layer called ‘macbook shadow’. Create an oval selection beneath your Macbook Pro and fill it with black. Then apply a gaussian blur to your shape. This should give the impression of your laptop casting a downward shadow.

现在创建新的图层macbook shadow。创建一个椭圆的选区在你的Macbook Pro的下方并用黑色填充。然后对其添加一个高斯模糊。这给你的笔记本电脑添加一个向下的阴影的感觉。

Step 11

步骤11

Write out some large header text (I used the free font Museo).

写一些大的标题(我用的是免费的Museo)(Museo TT 700,字号:52pt,水平缩放85% )

Then apply the blending options shown below:

然后按照下图添加图层样式:

渐变编辑器颜色: #f0f0f0和#d4d4d4

Step 12

步骤12

Add some more text to your header, this time using Arial as your font, and select a color that is a darker version of your header background color.

在你的头部区域添加一些文字,这次字体用的是Arial,颜色选择你的头部区域的深色版的背景色(#992d01)

Step 13

步骤13

Now work on creating a form in your header section. Create a rounded rectangle shape for your form input (radius 10px), and apply the blending options shown below. This should make your form look embedded in your header background.

在你的头部区域创建一个表单。给你的表单创建一个圆角矩形(37,361,246,39)(半径10px),然后按照下图添加图层样式。这使你的表单看起来是嵌入到你的头部区域的背景中。

渐变编辑器的颜色: #9a3100和#6b2118

Step 14

步骤14

Now create a button for your form:

在你的头部区域创建一个按钮。圆角矩形(298,361,185,39)(半径10px),然后按照下图添加图层样式。

渐变编辑器的颜色: #bf8453和#e6ad7e

Step 15

步骤15

Add some text for your form elements:

给你的表单元素添加一些文字,左边的文字的颜色: #cbcbcb,右边文字的颜色: #992d01

Step 16

步骤16

Add text to the white area beneath your header, I’ve just used filler text/images as an example:

添加一些文本在头部区域下方的白色区域,我填了一些文字和图像,用作举例

Step 17

步骤17

Create a new layer called ‘footer’. Create a selection at the bottom of your canvas and fill it with light gray.

新建图层footer。在你的画布的底部创建一个选区(0,800,900,100),并填充亮灰色(#d3d3d3)

Step 18

步骤18

Create a new layer and create a circle in the bottom middle of your canvas. Fill it with the same light gray color as your ‘footer’ layer. Then merge this layer down with your ‘footer’ layer. Apply a gradient overlay (settings below):

新建图层并在你的画布的底部中间的位置创建一个圆(405,770,90,90)。用footer图层同样的亮灰色填充。然后和footer图层合并。按照下图添加渐变叠加

Step 19

步骤19

To finish up, add some text to your footer, adding a subtle drop shadow:

快结束了,在你的页脚区域添加一些文字,并添加一些投影

And We’re Done!

最终完成的作品

后记:

这个是一篇简单的教程。但是利用一些纹理和小技巧,也实现了不错的效果。整体配色偏亮橙色,是暖色系,给人一种舒服、温暖的感觉。

PS网页设计教程XXVII——设计一个大胆和充满活力的作品集的更多相关文章

  1. PS网页设计教程——30个优秀的PS网页设计教程的中文翻译教程

    PS网页设计教程--30个优秀的PS网页设计教程的中文翻译教程   作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作 ...

  2. PS网页设计教程XXIV——从头设计一个漂亮的网站

    作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...

  3. 教你如何用PS制作多款按钮UI设计教程

    教你如何用PS制作多款按钮UI设计教程 本文教大家制作按钮的方法 LV. ★ 初入设计,学做按钮.只会套个底色,加个阴影,字体纯白,小聪明的弄个圆角. LV. ★★(描边.字体.内阴影) 看了很多案例 ...

  4. 22个Photoshop网页设计教程网站推荐

    这些网站都会经常更新一些优秀且高质量的Web界面设计教程.如果你热爱网页设计并且经常搜集各种界面设计教程,那么你一定要把下面这些网站收藏起来. 您还可以参考以下网页设计相关教程及资源:<Web ...

  5. 60个响应式的Web设计教程–能够手机访问!

    想要学习响应式[responsive:屏幕自适应的效果]的网页设计和开发技术?在这个超大的收藏集合中,我想你定会找到想要开始学习的响应式网页设计教程. 面对超过1亿的手机互联网用户,开发专业和用户友好 ...

  6. 网页设计简史看设计&amp;代码“隔膜”

    本文来自网易云社区 作者:马宝 设计与代码之间隔膜所在?既然你诚心诚意地问了,我就大发慈悲地告诉你.为了防止地球被破坏,为了维护世界的和平,为了贯彻爱与真实的邪恶~,我是穿梭在前端与设计之间爱与美丽的 ...

  7. iPhone / iPad UI界面设计与图标设计的尺寸设计规范+安卓+网页

    ①iPhone的设计尺寸 iPhone界面尺寸: 设备 分辨率 状态栏高度 导航栏高度 标签栏(工具栏)高度 iPhone6 plus设计版 1242 × 2208 60px 132px 146px ...

  8. 2013年最佳的16个 Photoshop 设计教程推荐

    使用 Photoshop 的时候,没有基础操作知识的话,用起来会非常困难,所以你应该阅读一些教程才能应用它们在你的工作中.在这篇文章中你看到的 Photoshop 教程的集合是2013年发布的最优秀的 ...

  9. BI之SSAS完整实战教程7 -- 设计维度、细化维度中 :浏览维度,细化维度

    上篇文章我们已经将Dim Geography维度设计好. 若要查看维度的成员, AS需要接收该维度的详细信息(包括已创建的特性.成员属性以及多级层次结构), 通过XMLA与AS的实例进行通信. 今天我 ...

随机推荐

  1. Maven下载依赖项的源代码(source code)和Javadoc

    Maven 默认只下载依赖项本身的 jar 文件,不下载源代码和 Javadoc.如此固然工程的体积是最小的,但在开发者不熟悉依赖的对象时,需要查找源代码中的方法定义和说明. 这时我们需要使用一条 M ...

  2. Javascript 优化项目代码技巧之语言基础(一)

        Javascript的弱类型以及函数作用域等规则使用编写Javascript代码极为容易,但是编写可维护.高质量的代码却变得十分困难,这个系列的文章将总结在项目开发过程中,能够改善代码可读性. ...

  3. 成功在神舟K650c-i7 d2(i7-4700MQ、HM87)上装好了Windows XP

    成功在神舟K650c-i7 d2(i7-4700MQ.HM87)上装好了Windows XP 本来已经在K650c上装好了Windows7.Windows8双系统,奈何某些旧软件只能在Windows ...

  4. 数据结构复习:直接插入排序与二分插入排序的C++实现

    1.直接插入排序 直接插入排序的过程可以理解为一个固定长度的数组被分为两个集合,即已排序集合和未排序. 开始时已排序集合为空,而未排序集合即为整个数组.当排序开始后插入一个对象,已排序集合元素数目加1 ...

  5. ManagementFactory (一) getClassLoadingMXBean

    ClassLoadingMXBean case import java.lang.management.ClassLoadingMXBean; import java.lang.management. ...

  6. java 多线程(总结)

    今天看了几篇关于java多线程问题的文章,将他们的部分内容引过来总结下,也算是对java多线程这类问题的整理. 在多线程中,必须明白两个问题,一是多线程实现,二是代码同步. 在java中要想实现多线程 ...

  7. Android 画文字图

    画图 private Bitmap getbitmap(String content) { Bitmap bitmap = Bitmap.createBitmap(400, 400, Bitmap.C ...

  8. postgresql 日志配置

    Postgresql日志收集   PG安装完成后默认不会记录日志,必须修改对应的(${PGDATA}/postgresql.conf)配置才可以,这里只介绍常用的日志配置. 1.logging_col ...

  9. c++const关键字---15

    原创博文,转载请标明出处--周学伟 http://www.cnblogs.com/zxouxuewei/ const是一个C++语言的限定符,它限定一个变量不允许被改变.使用const在一定程度上可以 ...

  10. 【转】Spark源码分析之-Storage模块

    原文地址:http://blog.csdn.net/aiuyjerry/article/details/8595991 Storage模块主要负责数据存取,包括MapReduce Shuffle中间结 ...