注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

品味人生博客

网页及博客素材,软件教程,网赚教程,技术知识总汇

 
 
 

日志

 
 

PhotoShop设计制作怀旧风格网页的详细教程  

2014-08-06 08:19:04|  分类: ps创意设计 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |


ps教程-品味人生-品味人生博客

第1步

这一次,我们要创建一个完整的网页设计风格的步骤,使用Photoshop和制作图像的人很多。 由于这是一个中级到高级的教程。我会跳过一些基本的步骤说明。 在RGB 72dpi首先创建一个新文件,800像素*950像素。 显示标尺和参考线拖动四个边界的文件, 这将是最佳的设计领域。 我打算保持一个固定宽度的布局。

图像>“画布大小在,增加了很多的宽度和高度 此外,1200 1000像素PX是好的, 这样,我们将设计更广泛的屏幕分辨率。 再添加更多的指导,你打算加入容器(标题,导航栏,侧边栏,页脚)。

ps教程-品味人生-品味人生博客

第2步

现在我们要创建一个标题的背景图案, 这是相当简单的。 创建一个新的文件300像素*50像素。参考下面的图片。 然后进入“编辑>定义图案保存为”模式1的形状。“

ps教程-品味人生-品味人生博客

           

第3步

接下来在我们的设计文件里建议一个新层,绘制矩形的高度为300像素使用矩形工具。 前往过滤器,并添加图案叠加, 为您的全新模式搜索和应用它。为了使它看起来纠正你必须按一下按钮,捕捉到原点。 更改图层填充为0%, 创建一个新的形状图层上面空白层,合并两者,这种方式,您将有准备的模式给它添加一些效果。 名称层“模式1。“

 

ps教程-品味人生-品味人生博客

第4步

选择“模式1”,并运用这一层的层风格:阴影效果,梯度涂层和模式叠加。尽量让类似的底部下面的图像,利用以下的价值观

ps教程-品味人生-品味人生博客

第5步

再次在我们的设计文件里建议一个新层, 绘制矩形的高度为300像素使用矩形工具。 前往过滤器,并添加图案叠加,乐一模式覆盖,黑色红色黑色渐变叠加, 和软阴影。 作为参考使用下面的图像的值。下一步, 添加一个隐藏所有图层蒙版“, 并绘制一个黑色到白色到黑色反射层上的梯度 口罩,你会得到类似下图的底部。

ps教程-品味人生-品味人生博客

             

第6步

命名为“轻,“并应用高斯模糊半径为50像素到它。 我创建了一个额外的指南,画中的光中心 头。 下面的导航栏上的删除一切,改变层的 混合模式为颜色减淡。

 

ps教程-品味人生-品味人生博客

第7步

一个颜色叠加,和图案叠加。

在这一点上,你必须考虑你要的方式 将HTML图像的CSS; 这就是为什么我使用远程0px大多数阴影 当时,只有水平或垂直梯度。 在这种情况下,纹理有许多水平线。 它需要很容易转换成一个重复的背景本 许多地区。此外,这是一个很好的人来休息一下,在您的组织层 文件夹,让一切组织。

ps教程-品味人生-品味人生博客

第8步

现在开始的细节, 我想补充一个显眼的地方,在网站的名称, 这就是为什么我会用 这 漂亮的垃圾标签形象。 显然,你必须提取的标签,并放置在左侧的顶部 角落我们的设计。尝试得到像第一张图片下面的东西。 接下来,使用魔术棒工具选择棕色小圈, 然后命令移一逆选择。 调整的水平和色相/饱和度使用下面的值。

ps教程-品味人生-品味人生博客

             

第9步

现在使用橡皮擦工具和一个不规则的刷子, 删除标签的边境部分地区。 要添加 剪纸 实际上, 选择减淡工具,并使用相同的画笔形状应用 道奇到标签的边框。

 

ps教程-品味人生-品味人生博客

第10步

我们将阴影添加到我们的标签下。为此, 重复的“标签”层, 改变色相/饱和度>亮度为-100, 并应用半径为10像素的高斯模糊。下一步, 改变“标签副本”混合模式为正片,并设置 不透明度为75%。

ps教程-品味人生-品味人生博客

第11步

为标签的最后修整, 改变饱和度为-40,使其更加灰色。

ps教程-品味人生-品味人生博客

             

第12步

现在我们将添加一些支持图像, 试图找到图像周围的一个概念, 但由于这是一个关于技术教程, 我选择一个随机的。 这一个 是一个美丽的图画老式火车在这里高地 玻利维亚。提取形状的火车不过你想要的。 然后改变“一条龙”图层的混合模式为变暗。

 

ps教程-品味人生-品味人生博客

第13步

让我们添加一些文字,第一页面的名称。使用类型的东西 垃圾字体,你可以找到一些有趣的东西了 这里。为标题用黑色的类型,改变图层的混合模式 覆盖, 然后复制该层,改变副本的不透明度为75%。 为了得到一个微小的模糊效果, 复制层移动一个或两个像素左或右。 添加更多的文本使用的东西就像一个口号或这种技术。此外, 这是一个很好的时机,添加导航链接,以及。

ps教程-品味人生-品味人生博客

第14步

现在,添加更多的东西,它的垃圾风格!我下载了一些 和Jenn B的 拨开 这里这些刷子有限制。 使用这些笔刷添加一些数字,角落, 胶带和诸如此类的东西, 随意做任何你想要在这一步。 只要记住下面都添加所有的“标签”和“标签层 复制“图层。

ps教程-品味人生-品味人生博客

             

 

第15步

然后应用中风和模式覆盖层的影响。

ps教程-品味人生-品味人生博客

第16步

我创建了四个文件夹,以保持版面组成:一种一 “头”高于一切,为“侧栏”下方的“头一,“一”内容“下面的”页眉“和”补充工具栏,“和最后一个”注脚。“

您可以添加到“内容”层这个矩形, 你也可以添加多个文件夹,里面这四个文件夹需要。 一旦你放置在一个适当的位置矩形, 申请阴影及中风效果使用以下值。

ps教程-品味人生-品味人生博客

步骤17

下载一些垃圾死角,从边界 这里 此外,添加上的另一侧栏的背景角落, 但是这也带来了它的不透明度低于25%。

ps教程-品味人生-品味人生博客

             

第18步

Let’s add some text. You can add any sample text, imagine that it’s javascript driven text recent posts section, or a featured post section, something like that. I’m using the same grunge display typeface as used for the navigation bar with the color #4D0D0D and Arial with a color of #3F3F3F for the body text.

套用阴影效果的名称和添加相同效果 导航项以及。 当您转换成HTML的CSS文件中的PSD, 你需要这些书籍的转换到图像, 所以它的行,如果你想添加更多的样式给他们。最后, 使用一些导游把它放入一个适当的位置的文字层。

 

ps教程-品味人生-品味人生博客

步骤19

我们的特色酒吧是寻找一个小空, 所以让我们添加一个支持图像。在这种情况下,我用宝丽来拍摄。 你可以下载图片,从宝丽 这里。提取宝丽来, 粘贴到上面一层灰色的背景和它的垃圾 角落里的“内容”的文件夹, 然后改变色相/饱和度,使宝丽多一点 深褐色(选择着色选项)。

使用“标签”层的边缘(步骤9)相同的技术。 擦除和道奇的宝丽来照片的边缘。最后, 添加阴影使用相同的技术,如用10步 本教程。

ps教程-品味人生-品味人生博客

步骤20

本人有过这样的自己,所以我将它添加到深褐色的设计图片。 加入一个以上的“宝丽来”层新层的任何图像, 选择黑色正方形的宝丽来, 然后命令移一逆选择。 选择图像层,并删除所有额外费用。下一步, 你可以添加更多的垃圾细节, 像一些在图片胶带, 列在下面的图片。 我申请1px的阴影效果,以及添加的磁带。

ps教程-品味人生-品味人生博客

             

步骤21

然后应用到了以下影响:内发光, 一图案叠加,一个阴影, 使用如下图所示的值。下一步, 上面绘制的矩形或粘贴到一个新的层标准的RSS 形状,并填充黑色。最后, 改变“的RSS形状”图层的混合模式为叠加。

 

ps教程-品味人生-品味人生博客

步骤22

现在放在侧边栏的左上角的RSS图标。 添加一些像文本“RSS源。”画出另一块胶带, 写在它的用户数量。记住, 现在,我们正努力在“侧栏”文件夹。

ps教程-品味人生-品味人生博客

步骤23

现在是时候增加一个职位,我们的设计。 只要写一些作为标题,日期变更线的另一项随机文本, 分类和作者。此外,由于该职位的一些文字的话。 印刷术是最重要的这一步。 我喜欢用的标题和对身体无衬线serif字体, 但就是我。决定你认为最适合你的设计最好的。

ps教程-品味人生-品味人生博客

             

为了让我们的样品后多一点的态度, 我们要添加就像在塔茨网站预览图像, 但它是一个垃圾设计,我们需要添加一个背景,因为这垃圾 我们的形象。 这是因为,添加填充CSS的顶部和底部简单, 然后设置一个重复的背景图片。

此图片将是 35毫米胶片. Extract two small stripes from the film, and change their Hue/Saturation using the values in the image below. Next, using an irregular Eraser, Delete some areas of the stripes. Finally, add a Drop Shadow to each stripe. When you have finish with the film, paste any image below the film layers. I’m adding a picture of one of my travels. Finally, apply a Stroke Effect (#2F261D) to that image.

 

ps教程-品味人生-品味人生博客

步骤25

下面画一条红线后 2px的意见和一些文字, 这是一个好主意,将所有相关层后进入一个新 文件夹,名为“后。“然后增加文件的一点点的高度, 你可以通过使用裁剪工具, 这样做只是为了看看我们设计的外观,如果有两个或三个 职位就可以了。重复的“邮报”集团, 和更改文本和图像,如下图所示。

ps教程-品味人生-品味人生博客

26步

其实这看起来相当不错, 现在添加补充工具栏的项目的冠军。 哟可以为每个项目的资料夹以及。

ps教程-品味人生-品味人生博客

             

步骤27

现在添加一个列表图标。你可以使用任何自定义形状。 添加一些随机文本,我使用的工具条格鲁吉亚。 重复的图标和编辑一个代表 徘徊 状态。对各个Sidebar的项目相同。

ps教程-品味人生-品味人生博客

步骤28

我们正在接近完成。 在侧边栏添加一些垃圾底部的细节, 加入到一个新层以上的一些垃圾刷子补充工具栏的 背景层。选择补充工具栏的背景层, 然后到“图层>图层蒙版>”显示所有。下一步, 一些隐藏的底部边栏的背景左侧区使用 一个不规则的黑色画笔。

ps教程-品味人生-品味人生博客

步骤29

最后, 选择补充工具栏的背景层,并复制它的图层样式。 绘制在底部设计里面的“页脚”一矩形 文件夹,将它粘贴图层样式。下一步, 提取并贴上 这 上图中的页脚的背景。

调整饱和度,使之成为多一点灰色。此外, 你可以申请到该纸重复阴影 技术步骤10。添加一些在纸上的文字, 也许一个口号或东西。并添加一些页脚文本, 就像一个快速导航栏,和版权信息。

ps教程-品味人生-品味人生博客

教程完毕。

            
  Flash教程  U5教程  html技巧  Ps教程
2014年05月17日 - 品味人生 -        品味人生的博客
  电脑技巧  现代人物  古韵人物  gif图片
  flash动画  png免抠图  动植物图  背景素材  顶栏图片  博客制作  模块代码  音画边框

  评论这张
 
阅读(191)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017