在Photoshop中创建一个光质感网页设计

  • 时间:
  • 浏览:0

作为编码者,美工基础是偏弱的。大伙儿儿还能够 参考或多或少心智成熟的句子的句子是什么是什么 的句子是什么是什么是什么的网页PS教程,提高自身的设计能力。套用励志的话 ,“熟读唐诗三百首,不需要作诗也会吟”。

本系列的教程来源于网上的PS教程,都在国外的,全英文的。另一方尝试翻译哪些优秀的教程。以前翻译能力有限,翻译的细节上还有待推敲,希望广大女日本男友不吝赐教。

约定:

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

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

3、原文中或多或少操作没法给出参数。另一方在反复测试的情况下测定了或多或少参数,以红色的文字显示。或多或少错误的参数,直接以红色文字显示正确的参数

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

这些:(90,22),表示矩形的左上角的坐标是(90,22),矩形的或多或少另有一一两个 多多参数教程里以前指定

4、在教程的最后要 附上另一方的心得。或多或少是对教程中的或多或少步骤的优化等。

In this web design tutorial, we’ll be creating a light textured web page layout. I will show you how apply subtle textures in web layouts, how to create a seamless diagonal mosaic pattern and how to create a tabbed content area design for the “Services” section.

在本网页设计教程中,大伙儿儿将创建另有一一两个 多多光质感的网页布局。我会告诉你怎么才能 才能 在网页布局中打上去微妙的纹理,怎么才能 才能 创建另有一一两个 多多无缝的对角拼接模式,以及怎么才能 才能 创建另有一一两个 多多“服务”每项的选项卡的内容区。

In this tutorial, we will use the 9400 Grid System to organize and arrange the elements of our web layout. Before we begin, download it to your computer.

在本教程中,大伙儿儿将使用9400网格系统,来组织和安排大伙儿儿的网页布局的元素。在结束以前,将其下载到您的计算机。

Unzip the archived file you downloaded, go to the “templates” folder and then go to the “photoshop” folder. You will find three .PSD files. Each of these files contains a grid with 12, 16 and 24 columns. In this tutorial we will be using the 12 columns grid.

解压下载好的文件,点到templates文件夹下的photoshop文件夹。我能 发现有一两个.PSD文件。它们分别蕴藏了12列、16列、24列网格。在本教程中,大伙儿儿使用12列网格

The .PSD files have some guides already set up, which will be very useful. To activate the guides, go to View > Show > Guides, or use the shortcut Ctrl/Cmd + ;.

.PSD文件以前蕴藏了或多或少设置好的网格,这会是非常有用。为了激活网格点击:视图 > 显示 > 网格,以前用快捷键,Ctrl/Cmd + ;

During this tutorial you will need to create shapes with specific dimensions. To see the exact size of a shape or selection while you are creating it, open the Info Panel by going to Window > Info. The width and the height of your shapes and selections will be displayed in this panel.

在本教程中,您将能够 创建具有特定尺寸的形态学 。当你在创建过程中要查看确切的大小,点击:窗口 > 信息,打开信息面板。你的形态学 或挑选 的淬硬层 和淬硬层 的将被显示在此面板中。

Now that we covered the basics of using the 9400 Grid System, we can move on to creating the web layout. Let’s get started!

现在,大伙儿儿讨论了使用9400网格系统的基础知识,大伙儿儿还能够 继续创建的网络布局。让大伙儿儿结束吧!

Step 1: Creating the Background of the Web Layout

步骤1:创建网页布局的背景

Open the "9400_grid_12_col.psd" file in Photoshop. Then go to Edit > Canvas Size and set the width to 1400px and the height to 1900px. You can adjust the height later on if you need more space for the web layout.

在PS中打开9400_grid_12_col.psd文件。而且点击:编辑应该是图像> 画布尺寸,而且设置淬硬层 为1400px,淬硬层 为1900px。以前网页布局能够 更多的空间,我能 在里边调整网页淬硬层 。

以前翻译教程不使用9400布局系统,故本步改为,新建文档,尺寸:1400px*1900px



Now we will change the color of the background from white to a light gray. With the "Background" layer selected, click on the little black lock icon from the top of the Layers panel to unlock this layer. Then change the color of the background layer to #ededed.

现在,大伙儿儿要把背景色从白色改为亮灰色。当Background图层选中的以前,单击图层面板里边的小黑锁的图标去解锁该图层。而且把背景图层的颜色改为: #ededed

以前是新建文档,故改为双击背景图层,去解锁它

Right-click on this layer and select Convert to Smart Object. Then go to Filter > Noise > Add Noise and set the Amount to 1%, the Distribution to Gaussian and tick the Monochromatic box.

在该图层上右键,挑选 转换为智能对象。而且点击:滤镜 > 杂色 > 打上去杂色。设置数量为1%,设置为高斯分布,勾选上“单色”。

Step 2: Creating the Header

步骤2:创建头部区域

We will create a simple header with the name of the web layout and some social media icons. Create a new group and name it "Header". Then select the Type Tool (T) and write the name of your layout. I used the font Gotham Bold with the size 42pt and the color #707679. Align this layer with the grid, as you see in the image below.

大伙儿儿将用网站的名字和或多或少社会媒体图标创建普通的头部区域。创建新组Header。而且用文字工具书写你的布局的名字。我用的字体:Gotham Bold,字号:42pt,颜色: #707679。按照下图对齐你的布局

Double-click on your text layer to open the Layer Style window and use the settings from the following image.

双击你的文字图层打开图层样式窗口,按照下图设置图层样式