Tag Archives: photoshop

原文： Create a webdesign company layout in Photoshop 作者：Jean-Baptiste Jung 这个是最终效果： 1 – 创建一个1024px×1300px大小的ps文档，用#669999填充背景。 2 – 新建图层。用直径为500px的画笔在画布的中上方画一个点。将图层不透明度设为84%，混合选项设置为“强光”。 3 – 接下来创建以下内容： – 内容 – 幻灯 – 导航 -表单 4 – 在导航图层组里面创建名为“header”的图层。用矩形选框工具画出一个宽度为画布宽度、40px高的矩形。用#333333填充。 5 – 使用文字工具，Rockwell粗体，10pt大小，在导航的左边输入站点名字（比如这里叫MisterDesign），在右边画出导航的菜单项。 6 – 使用圆角矩形工具画出菜单项的背景，用#66999填充。用来表明当前页。别忘了把文字图层放在这个图层的上面。现在导航就完成了。 7 – 现在来制作内容区域。首先创建一个标语。我使用“Websites that … Continue reading →

这个Photoshop web设计的教程中，我们将学习设计一个整洁的具有现代气息的web站点。这是设计和HTML/CSS模板转换系列教程的第一部分。 第一部分: 用Photoshop设计一个小型、现代的产品主页 第二部分: 将小型、现代的产品主页由psd转换成XHTML/CSS模板 预览 以下是我们将要一些设计的页面预览，点击图片可以放大。 建立一个新的Photoshop文档 1 首先在Photoshop中新建一个文档（Ctrl+N），大小为1200 x 1200像素，背景设为透明。 设置头部背景 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），然后对其左边参考线边沿添加上页面标题和标语。 … Continue reading →

原文：http://photoshoptutorials.ws/photoshop-tutorials/layouts/design-a-web-template-using-the-960-grid-system/all-pages.html 作者：Ross Aitken 翻译：tunpishuang 在photoshop中学习制作基于960网格系统的网页模板，你将会学到图层效果和定位元素相关知识。 最终效果预览 第一步 一般在Photoshop中制作网页模板的时候，我使用960网格系统。现而今这个网格系统在web设计中相当流行。然而我仍然相信网格系统不应该被过度的依赖。我使用960的主要原因是它psd文件中自带的参考线可以大大提高web设计的效率。所以我推荐到这里免费下载960。下载完成后用PS打开一个12行的psd文件（960_grid_12_col.psd），将会看到下面这个文件。 第二步 如果参考线没有打开，请通过-视图>显示->智能参考线和视图->对齐到->参考线打开，快捷键Ctrl+;。以下你看到的是我已经在图中间画好了一个黑色矩形，接下来所有的元素都将包含在这个矩形中。其实你没有必要画这个矩形，因为背景是白色的，如果你觉得有帮助，不妨画之。 第三步 新建一个图层，选择渐变工具然后选择如下图白色到黑色的一个渐变效果。画的时候按住shift使渐变线绝对水平。如果效果上有差异，可以多试几次。 第四步 选择矩形选定工具沿着参考线从左上到右下在第二步中的渐变图中选定如下区域。按ctrl+shift+I反选，然后按delete删除反选区域。 第五步 重复上面两个步骤，让右边也同样加入一个渐变图层，确保它们是对称的。 第六步 新建一个图层组把两个边沿渐变矩形拖入其中，然后选定图层组，将不透明度设置为10%。 第七步 接下来加入两边的虚线效果。如果只需要在css中使用dashed边框，那么这个虚线效果在PS中是没有必要制作的。一个聪明的办法是使用图形变换工具；首先创建一个新图层，然后按Ctrl+T，然后把这个蓝色矩形稍微下移一些，然后连续按Ctrl+Shift+Alt+T。如果你感觉这个方法复杂了，可以手动的创建每个蓝色矩形。然后选定所有蓝色矩形，按Ctrl+E将它们合并。然后复制这个图层到右边，做成两个对称的边沿。 第八步 现在加入网页标题和标识性语言，这里我使用到的字体是“Rockwell”。使用同样的蓝色。如果你熟悉色板，一个聪明的办法是分别新建一个蓝色、一个灰色色板以供后续使用。 第九步 现在用Helvetica或者Tahoma无衬线字体创建菜单项。只需要输入一些大写的同色的字体。一般我喜欢把大写字体的字间距调大一点。选择字体，勾选窗口>字符，然后在字符面板中调整字间距。每个菜单项都在不同的图层中调整。 第十步 把所有的菜单项加入一个图层组，复制一个副本，然后把色彩调为灰色，这样就有两个菜单组了，一个是蓝色的，一个是灰色的。这样做是为了在网页中产生一个鼠标悬停变色效果。每次同时只让一个菜单项可见，效果如图： 第十一步 如果站点需要RSS订阅功能，那么可以加入一个自定义的RSS订阅图标。首先创建一个蓝色矩形框，然后用Rockwell字体写上“RSS”。订阅图标可以到这里下载，选择“Developer Kit”，然后放入我们的psd文件中。 然后把图标放入一个新的图层组，然后复制组，把蓝色矩形换成灰色，同样是为了实现鼠标悬停换色的效果。 第十二步 我觉得主页加入一个主题图片将会看起来不错。我从stock image上下载一个符合这个网页配色的图片，如果你有兴趣可以到SXC这里下载。将图片放入文档然后调整大小和位置，如下图： （译者注：原作者提供的图片地址已经失效） 第13步 通过矩形框选定工具，在图上拖动一个选定框（也就是你需要的部分），然后反选，删除其他部分。 第十四步 使用Rockwell字体在图上写一些小的标示文字。然后新建一个图层，画两个白色矩形作为标示文字背景，然后把字体颜色改为蓝色。 第十五步 在幻灯图片的右边，将加入一些带引号的文字，文字内容可以是“欢迎光临本站”之类的话。用无衬线字体灰色写上这些文字，然后在不同的图层中加入超大号的引号，然后调整好位置。 … Continue reading →