如何创建一个在Photoshop油渍网页设计

如何创建一个在Photoshop油渍网页设计 阿尔瓦罗古斯曼 2008年9月24日与223评论 教程详细 课程 :Photoshop中 难度 :中级 完成时间 :2-3小时 下载源文件 本教程的源文件是提供给高级会员。 获取高级会员 分享 最终产品是什么，您将创建 Photoshop是网页设计往往是正确的工具，特别是如果你要创建一个设计使用大量图片和刷效果。 在本教程中，我将向您展示如何创建一个完整的垃圾摇滚的主页设计。 我们将设计的标题，侧边栏，身体，页脚和样式一切工作的一个重质感和陈旧的设计在一起。 第1步 这一次，我们将创建一个垃圾摇滚风格充分利用Photoshop和网页设计的素材很多。 由于这是一个中级到高级教程，我会跳过一些基本的步骤说明。 首先，创建了800个像素的RGB 72dpi一个新的文件950像素。 展览的统治者和拖动4导游包围的文件，这将是最佳的设计领域。 我打算保持一个固定宽度的布局。 前往图像“>画布大小，增加宽度和高度的更多，由1000像素1200像素的美 好，这样我们会更广泛的屏幕分辨率设计。 然后加入更多的指导，你正在添加容器(标题，导航栏，侧边栏，页脚)。 让我们想象一下这种设计是一个WordPress注定，所以我们需要一个头，头内导航栏，和右的侧栏。 请看以下图片底部看看。 然后填写与此颜色,7A8173背景。 第2步 现在我们要创造一个头的背景，这是相当简单的模式。 创建一个新文件50像素和300像素的图像绘制类似下面的东西。 我使用的指南，使我的形状尽可能对称。 然后转到“编辑>定义图案，并保存为”模式1的形状。“ 第3步 一名在我们的主要设计文件的一个新层，画一个300像素矩形的高度使用矩形工具。 前往过滤器，并添加一个覆盖模式，为您的品牌寻找新的模式和应用它。 为了使它看起来纠正你必须按一下按钮对齐的起源。 更改图层填充为0,，创建一个新层以上的形状空白层，合并两个，这样你将有模式可以增加一些影响到它。 名称层“模式1”。 第4步 选择“模式1”层，并适用于它的一些图层样式:下落式阴影，渐变叠加，和一 个模式覆盖。 设法得到类似下面的图像的底部，使用下列值。 第5步 现在我们要添加导航栏的背景。 绘制一个矩形私藏的“模式1”层一点。 适用于该矩形覆盖一个模式，一个黑红色黑色渐变叠加，和柔和的下落式阴影。 使用下面的图像作为参考值。 接下来，添加一个隐藏所有图层蒙版“，并以此为黑白色的反射层为黑色面具梯度，你会得到类似下图的底部。 第6步 现在画一个椭圆(,691E1B)以上的“模式1”层半径为50像素，将其命名为“光”，并应用到它的高斯模糊。 我创建了一个额外的指导提请在头中心的光。 删除下面的导航栏的一切，改变图层的混合模式颜色减淡。 第7步 要完成布局的第一部分，我们将提请侧边栏的背景。 得出一些指南，工具条划定并编辑现有的指南，以使他们适合于实际设计。 然后绘制一个红色矩形(,3D100B)并应用以下样式:一个阴影，一个颜色覆盖，覆盖和模式。 在这一点上，你必须考虑你将要削减 + CSS的形象为HTML，这就是为什么我使用远程滴0px阴影的时间大部分，只有横向或纵向梯度。 在这种情况下，质地有很多水平线。 它需要很容易转换成许多地方重复的背景。 此外，这是一 个很好的点休息和组织您的文件夹的层次让一切组织。 第8步 现在开始的细节，我想补充一个突出的地方在该网站的名称，这就是为什么我会用这个漂亮的垃圾摇滚标签形象。 很明显，你必须提取的标签并将其放置在顶部的设计它的左上角。 尝试得到像下面的第一个形象的东西。 接下来，使用魔术棒工具选择棕色小圆圈，然后命令+转移+我要逆选择。 调整水平和色相/饱和度使用如下所示的值。 第9步 现在，使用橡皮擦工具和一个不规则的刷子，删除标签的边境部分地区。 要添加一个剪纸的效果，选择道奇工具并使用相同的刷子形状适用回避的标签的边界。 第10步 我们将添加一个阴影明年我们的标签。 为此，重复的“标签”层，更改/饱和度>明度色相至-100，并适用于一半径10像素高斯模糊。 接下来，更改“标签副本”混合模式为正片，并设置不透明度为75,。 第11步 ，使其更加灰色。 该标签的最后修整，改变饱和度至-40 第12步 现在，我们将添加一些支持图像，图像周围试图找到一个概念，而是因为这是一个技术教程有关，我选择一个随机的。 这一个是一个美丽的图画老式火车在这里的一个高地玻利维亚。 提取列车形状不过你想要的。 然后改变“火车”层的混合模式变暗。 第13步 让我们添加一些文本，第一页的名称。 形式的东西用油渍字体 ，你可以找到一些有趣的多在这里 。 为标题用黑色的类型和改变层的混合模式为叠加，然后复制一层，改变复制的不透明度为75,。 为了得到一个小小的模糊效果，将复制的层1或2左或右像素。 添加更多的文字使用这个东西就像一个口号或技术。 此外，这是一个好时机添加导航链接以及。 第14步 现在，添加更多的东西，它的垃圾摇滚风格～ 我下载了一些詹恩B的刷子从这里 ，这些刷有限制。 利用这些刷子添加一些数字，弯道，掩蔽胶带和诸如此类的东西，随意做任何你想要在这一步。 只要记住以下的所有都添加“标签层” ”层。 和“标签复制 第15步 现在我们将开始添加的网页板块。 首先，在头我们需要一个搜索栏。 键入一个搜索标签。 接下来，绘制一个红色(,6A0400)作为搜索输入栏的矩形，然后套用一个模式中风，覆盖层的影响。 第16步 现在我们将开始加入我们的设计的主要内容。 首先我们要添加一个字段放一些特色文本。 绘制一个暗灰色(,0D0F0E)矩形成层以下的侧栏。 我创建了四个文件夹，以保持组织的布局:一为“头”高于一切，一为“补充工具栏”下面的“头”，一为“以下内容的”头“”和“侧栏”，而最后为“注脚”之一。 您可以添加到“内容”图层的矩形，你也可以添加如这四个文 件夹内需要多个文件夹。 一旦你在一个适当的位置放置的长方形，应用下落式阴影和中风的效果使用下面的值。 第17步 下载一些油渍角落和边界从这里 ，并粘贴在灰色的背景之一。 其次，申请适用于1,171612色的覆盖效果的一个角落。 此外，添加另一个在补充工具栏的背景角落，但是这也带来了其低于25,不透明度。 第18步 让我们添加一些文本。 您可以添加任何示例文本，想象它的javascript驱动文本最近岗位部分，或一个有特色的部分后，类似的东西。 我使用的是同样的油渍显示字体为同一个,3F3F3F对身体的文字颜色与颜色,4D0D0D和Arial导航栏使用。 申请一个下拉阴影效果的标题和添加相同效果的导航项目以及。 当您转换成HTML + CSS文件这个PSD的，你需要这些书籍的转换到图像，所以它的行，如果你想给他们增加更多的样式。 最后，使用一些指南放到一个适当的位置的文字图层。 步骤19 我们的特色酒吧是寻找一个小空，所以让我们添加一个支持的形象。 在这种情况下，我用宝丽来拍摄。 你可以下载图片由宝丽来这里 。 提取偏振片，粘贴到上面灰色的背景及对“内容”文件夹一层油渍的角落，然后改变色相/饱和度，使宝丽多一点深褐色(选择着色选项)。 使用“标签”层的边缘(步骤9)相同的技术。 擦除和道奇边的拍立得照片。后，添加一个阴影使用相同的技术在本教程中的步骤10使用。 最 步骤20 我有这个图片我自己乌贼所以我将它添加到的设计。 添加到上面的“宝丽来”一层一层新的形象，选择了宝丽来的黑方，然后命令+转移+我要逆选择。 选择图像层和删除所有的额外费用。 接下来，你可以添加更多的垃圾摇滚喜欢的一些图片胶带在细节，如下面的图像显示。 我申请1px的阴影效果，以及添加的磁带。 步骤21 这是一个好时机添加一个RSS图标到工具栏。 画一个圆角矩形(,99917E)，然后应用下列影响到它:内发光效果，这种模式覆盖，以及一个阴影，请在下面的图片中显示的值。 下一步，绘制或成以上的矩形的形状，并填写RSS用黑新层粘贴。 最后，改变“的RSS形”层混合模式覆盖。 22步 现在放在边栏的左上角的RSS图标。 添加一些诸如“RSS馈入的文本。” 绘制另一块胶带，并写在它的用户数量。 记住，现在我们在“侧栏”文件夹中工作。 23步 是时候添加一个职位，我们的设计。 只是写一些作为一个标题，另一日期，类别路线，笔者随机文本。 此外，由于该职位的某些文字的话。 印刷术是在此步骤中最重要的。 我喜欢用的标题和对身体的无衬线字体的衬线，但只有我。 决定你觉得你的设计是最好的。 24步 为了让我们的样本后多一点的态度，我们将添加一个预览图像，就像在塔茨的地点，但由于这是一个垃圾风格设计，我们需要添加一个垃圾摇滚背景我们的图像。 这是只要把填充顶部和底部与CSS，然后设置背景图片的简单重复。 这形象，将是35毫米胶片 。 两个小条纹提取来自电影，并改变其色相/饱和度使用下图的值。 接下来，用一个不规则的橡皮擦，删除一些条纹领域。 最后，添加一个阴影每个条纹。 当你完成了与电影，粘贴薄膜层以下的任何图像。 我加入了我的旅行一张图片。 最后，应用一个中风的影响(,2F261D)到该图像。 25步 绘制一个2px红线以下的职位和一些文字的评论，这是一个好主意，加入所谓的“发布后的新文件夹的所有相关层。” 然后增加文档的高度一点点，你可以通过使用工具的作物，这样做只是为了看看我们的设计会看，如果有两个或三个职位上。 重复的“邮报”集团，并更改文本和图像，如下所示。 26步 其实这是看起来相当好，现在添加补充工具栏的项目的冠军。 哟可以为每个项目文件夹以及。 27步 现在添加一个列图标。 你可以使用任何自定义形状。 添加一些随机的文本，我使用的工具条格鲁吉亚。 重复的图标和编辑一个代表悬停状态。 难道每个侧栏项目相同。 28步 我们正在接近完成。 添加了侧边栏的底部有油渍的细节，加入到一个以上的侧栏的背景层新层一些垃圾刷子。 选择补充工具栏的背景层，然后转到图层“>图层蒙版”显示所有。 其次，隐藏工具条的背景左下角一些地区使用不规则黑色刷。 29步 最后，选择补充工具栏的背景图层，并复制它的图层样式。 绘制一个在里面的“页脚”文件夹并粘贴设计底部矩形图层样式到它。 下一步，提取并贴上此背景图像上面页脚的。 调整饱和度，使之成为多一点灰色。 此外，您可以适用于该纸一阴影重复第10步技术。 添加了一张纸，也许一个口号或一些文字的东西。 并添加一些页脚文本，就像一个快速导航栏，和版权信息。 结论 网页设计是不是一块蛋糕，但我希望这个教程将帮助您提高您的技能。 就看你现在，设计自己，或注册了加下载PSD源和播放它。 我很想看到一些网站设 计中的垃圾摇滚Psdtuts + Flickr小组 。 您可以查看下面的最终图像或查看更大 的版本在这里 。