×

关注微信公众号

免备案网站空间虚拟主机双线空间域名查询PS数码后期
photoshop互助课堂数百G视频教程下载英语培训机构初中英语如何学随时随地聆听大师开讲/课堂
酷素材!视频教程打包下手绘教程抠图教程路径专辑photoshop cs3视频教程
楼主: 肥鱼

[效果] PhotoShop来设计制作怀旧风格的个人网页效果

[复制链接]
发表于 2013-3-7 09:41:24 | 显示全部楼层 |阅读模式
本帖最后由 肥鱼 于 2013-3-7 10:05 编辑

  转自网络上的一篇翻译教程,翻译的一塌糊涂,但大致还能看,凑合看把。利用PhotoShop来设计制作怀旧风格的个人网页效果,让我们先来看下下面的最终效果图,是不是很有味道啊,呵呵,试一下吧
16c940766723e816d772710937a30dc3.jpg
  下面开始制作这个风格模板
  第1步
  这一次,我们要创建一个完整的网页设计风格的步骤,使用Photoshop和制作图像的人很多。 由于这是一个中级到高级的教程。我会跳过一些基本的步骤说明。 在RGB 72dpi首先创建一个新文件,800像素*950像素。 显示标尺和参考线拖动四个边界的文件, 这将是最佳的设计领域。 我打算保持一个固定宽度的布局。
  图像>“画布大小在,增加了很多的宽度和高度 此外,1200 1000像素PX是好的, 这样,我们将设计更广泛的屏幕分辨率。 再添加更多的指导,你打算加入容器(标题,导航栏,侧边栏,页脚)。

f4e473aba00de029c16dced8915e237e.jpg                         
本帖的地址:http://bbs.jcwcn.com/forum.php?mod=viewthread&tid=523166
跟着教程做一遍,做完的图要到这里评论交作业,教程有看不懂的地方,可以在贴子下面评论
 楼主| 发表于 2013-3-7 09:42:22 | 显示全部楼层
酷素材
  第2步
  现在我们要创建一个标题的背景图案, 这是相当简单的。 创建一个新的文件300像素*50像素。参考下面的图片。 然后进入“编辑>定义图案保存为”模式1的形状。“

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

040e1babba6a5f8731145d19decbe725.jpg

回复 支持 反对

使用道具 举报

 楼主| 发表于 2013-3-7 09:43:34 | 显示全部楼层
 第4步
  选择“模式1”,并运用这一层的层风格:阴影效果,梯度涂层和模式叠加。尽量让类似的底部下面的图像


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

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

de18b80966d0fb6c7c325a3406bba129.jpg                         

回复 支持 反对

使用道具 举报

 楼主| 发表于 2013-3-7 09:44:33 | 显示全部楼层
  第7步
  一个颜色叠加,和图案叠加。
  在这一点上,你必须考虑你要的方式 切 将HTML图像的CSS; 这就是为什么我使用远程0px大多数阴影 当时,只有水平或垂直梯度。 在这种情况下,纹理有许多水平线。 它需要很容易转换成一个重复的背景本 许多地区。

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

efd484d14773ddb59422f552316d8bef.jpg                         

回复 支持 反对

使用道具 举报

 楼主| 发表于 2013-3-7 09:45:11 | 显示全部楼层
酷素材
  第9步

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

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

d09a3e4a9810b117c406f23a44526f79.jpg
  第11步
  为标签的最后修整, 改变饱和度为-40,使其更加灰色。

3cb801ce7212f52fe13e09bbe389b472.jpg                         

回复 支持 反对

使用道具 举报

 楼主| 发表于 2013-3-7 09:45:43 | 显示全部楼层
酷素材
  第12步
  现在我们将添加一些支持图像, 试图找到图像周围的一个概念, 但由于这是一个关于技术教程, 我选择一个随机的。 这一个 是一个美丽的图画老式火车在这里高地 玻利维亚。提取形状的火车不过你想要的。 然后改变“一条龙”图层的混合模式为变暗。

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

91d9549ac1f283b6868b6120fe7dbc9e.jpg                         

回复 支持 反对

使用道具 举报

 楼主| 发表于 2013-3-7 09:46:22 | 显示全部楼层
  第14步
  现在,添加更多的东西,它的垃圾风格!我下载了一些 和Jenn B的 拨开 这里这些刷子有限制。 使用这些笔刷添加一些数字,角落, 胶带和诸如此类的东西, 随意做任何你想要在这一步。 只要记住下面都添加所有的“标签”和“标签层 复制“图层。

90d16e084f967db0dce4fbe656dba1cf.jpg
  第15步
  然后应用中风和模式覆盖层的影响。


a959756f841f72507afbab031bcd5d33.jpg


回复 支持 反对

使用道具 举报

 楼主| 发表于 2013-3-7 09:47:32 | 显示全部楼层
  第16步
  我创建了四个文件夹,以保持版面组成:一种一 “头”高于一切,为“侧栏”下方的“头一,“一”内容“下面的”页眉“和”补充工具栏,“和最后一个”注脚。“
  您可以添加到“内容”层这个矩形, 你也可以添加多个文件夹,里面这四个文件夹需要。 一旦你放置在一个适当的位置矩形, 申请阴影及中风效果使用以下值。

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

9d77b184cb007a40f364691dd9c4b758.jpg
 

回复 支持 反对

使用道具 举报

 楼主| 发表于 2013-3-7 09:48:16 | 显示全部楼层
 第18步

 让我们添加一些文字。您可以添加任何示例文本,想象它的JavaScript驱动的文本最近的帖子部分,或一个有特色的后段,类似的东西。我使用的是相同的垃圾所使用的显示字体的导航栏的颜色#4D0D0D和Arial字体与正文文本的颜色#3F3F3F。            

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

baac16b2d928b736ed4c07fadda44695.jpg
  步骤19
  我们的特色酒吧是寻找一个小空, 所以让我们添加一个支持图像。在这种情况下,我用宝丽来拍摄。 你可以下载图片,从宝丽 这里。提取宝丽来, 粘贴到上面一层灰色的背景和它的垃圾 角落里的“内容”的文件夹, 然后改变色相/饱和度,使宝丽多一点 深褐色(选择着色选项)。
  使用“标签”层的边缘(步骤9)相同的技术。 擦除和道奇的宝丽来照片的边缘。最后, 添加阴影使用相同的技术,如用10步 本教程。

92eaf4c39db4d9d0ba54ef6b4153fea1.jpg                         


回复 支持 反对

使用道具 举报

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

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

e916db9503d5710bdfdddc2dc5c5499d.jpg


回复 支持 反对

使用道具 举报

 楼主| 发表于 2013-3-7 09:57:13 | 显示全部楼层
本帖最后由 肥鱼 于 2013-3-7 10:02 编辑

  步骤22
  现在放在侧边栏的左上角的RSS图标。 添加一些像文本“RSS源。”  画出另一块胶带, 写在它的用户数量。记住, 现在,我们正努力在“侧栏”文件夹。
2.jpg
  步骤23
  现在是时候增加一个职位,我们的设计。 只要写一些作为标题,日期变更线的另一项随机文本, 分类和作者。此外,由于该职位的一些文字的话。 印刷术是最重要的这一步。 我喜欢用的标题和对身体无衬线serif字体, 但就是我。决定你认为最适合你的设计最好的。
3.jpg
  为了让我们的样品后多一点的态度, 我们要添加就像在网站预览图像, 但它是一个垃圾设计,我们需要添加一个背景,因为这垃圾 我们的形象。 这是因为,添加填充CSS的顶部和底部简单, 然后设置一个重复的背景图片。


  此图片 35毫米胶片. 设置色#相/饱和度的值在图片。
     接下来,使用一个不规则的橡皮擦,删除一些地区的条纹。最后,添加阴影。


       当你完成的电影,粘贴的薄膜层下面的任何图像。最后,套用中风效果(#2F261D)到该图像。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2013-3-7 10:03:35 | 显示全部楼层
38412869629a4edeee924a4b41ebf506.jpg
  步骤25
  下面画一条红线后 2px的意见和一些文字, 这是一个好主意,将所有相关层后进入一个新 文件夹,名为“后。“然后增加文件的一点点的高度, 你可以通过使用裁剪工具, 这样做只是为了看看我们设计的外观,如果有两个或三个 职位就可以了。重复的“邮报”集团, 和更改文本和图像,如下图所示。

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

cf64ff97bfd4111acdd2277b7da0a577.jpg                         

回复 支持 反对

使用道具 举报

 楼主| 发表于 2013-3-7 10:04:07 | 显示全部楼层
  步骤27
  现在添加一个列表图标。你可以使用任何自定义形状。 添加一些随机文本,我使用的工具条格鲁吉亚。 重复的图标和编辑一个代表 徘徊 状态。对各个Sidebar的项目相同。

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

98c4d6a833f0fa639ed4361882615978.jpg


回复 支持 反对

使用道具 举报

 楼主| 发表于 2013-3-7 10:04:36 | 显示全部楼层
 步骤29  最后, 选择补充工具栏的背景层,并复制它的图层样式。 绘制在底部设计里面的“页脚”一矩形 文件夹,将它粘贴图层样式。下一步, 提取并贴上 这 上图中的页脚的背景。



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

a25794b2f35bc8bfa66698027ee77694.jpg
  至此怀旧风格的个人网页教程完成

回复 支持 反对

使用道具 举报

发表于 2018-2-15 10:16:49 | 显示全部楼层
好帖就是要顶
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | [立即注册]

本版积分规则

2345