用ps制作网页
使用Adobe Photoshop软件创建网页设计的步骤
使用Adobe Photoshop软件创建网页设计的步骤Adobe Photoshop是一款功能强大的图像处理软件，广泛应用于网页设计领域。
它提供了丰富的工具和功能，使得设计师可以轻松创建出令人惊艳的网页。
本文将介绍使用Adobe Photoshop软件创建网页设计的步骤和技巧。
1. 确定设计风格在开始设计之前，首先需要确定网页的整体风格和主题。
这可以根据网页的需求和目标受众来确定。
例如，如果是一个艺术品展示网站，可以选择一种独特的、具有艺术气息的设计风格。
而如果是一个企业官网，可能更适合选择简洁、专业的设计风格。
2. 设计网页布局接下来，需要设计网页的整体布局。
可以利用Adobe Photoshop的画布功能来创建一个适合网页的大小，并将画布分割成不同的区域。
这样可以更好地组织和安排网页的内容。
比如，可以将头部、导航栏、主要内容区域和底部等部分分开，并为每个区域设计合适的样式和排版。
3. 创建导航栏和标志导航栏是网页中非常重要的一部分，需要设计一个易于导航和视觉上吸引人的导航栏。
可以使用Adobe Photoshop的形状和文本工具来创建导航栏的按钮和标签，并为它们添加相应的样式和效果。
同时，还可以设计一个与网页主题相关的标志，用于展示网站的品牌和身份。
4. 添加图片和图形图片和图形是网页设计中不可或缺的元素。
可以使用Adobe Photoshop的选择、剪切和调整工具来处理和编辑图片，使其适应网页的需求。
还可以添加一些图形元素，如图标、背景纹理等，以增加网页的视觉吸引力。
同时，要注意图片和图形的大小和加载速度，避免影响网页的加载性能。
5. 设计主要内容区域主要内容区域通常是网页的核心部分，需要设计一个清晰、易于阅读和浏览的布局。
可以使用Adobe Photoshop的文本和段落样式工具来设计网页的标题、段落和列表等内容。
还可以添加一些视觉效果，如颜色、字体、阴影等，以增强内容的可读性和吸引力。
如何用Photoshop制作网页设计图
如何用Photoshop制作网页设计图第一章：网页设计图的基本要素网页设计图是指在Photoshop中创建的一种视觉呈现，用于展示网页的布局、颜色、字体等设计元素。
在制作网页设计图时，需要注意以下几个基本要素：1. 页面尺寸：合适的页面尺寸可以确保网页在不同设备上显示完整。
常见的页面尺寸有1200px、1920px等。
在Photoshop中，可以通过选择“新建”来设置页面尺寸。
2. 布局结构：网页设计图应该包含网页的整体布局结构，如头部、导航栏、正文、侧边栏、底部等。
根据设计需要，可以使用参考线和网格来辅助布局。
3. 颜色方案：选取合适的颜色方案是网页设计中至关重要的一步。
Photoshop提供了丰富的颜色选择工具，如调色板、渐变工具等。
可以根据品牌色彩和网页主题选择合适的颜色。
4. 字体和排版：选择适合网页内容和风格的字体是网页设计的关键。
在Photoshop中，可以通过文本工具选择合适的字体、大小、行间距等，并进行对齐、调整字距等操作。
第二章：利用图层和样式创建网页元素在网页设计中，常见的元素有按钮、图标、标题、背景等。
借助Photoshop的图层和样式功能，可以轻松创建这些元素：1. 图层：使用图层可以将设计元素分开管理，方便修改和调整。
可以通过图层面板对图层进行命名、分组、调整不透明度等操作。
2. 图层样式：Photoshop提供了丰富的图层样式，如阴影、边框、渐变等。
通过在图层样式对话框中进行设置，可以快速添加元素的样式效果，使网页看起来更加美观。
3. 矢量图形：矢量图形可以无损放大，并能保持其清晰度和光滑度。
在Photoshop中，可以使用形状工具绘制矢量图形，并进行填充、描边、变换等操作。
第三章：优化和导出网页设计图在制作网页设计图后，还需要进行一些优化和导出操作，以确保图像加载速度和质量：1. 图像优化：使用Photoshop的图像处理工具，如图像调整、图像压缩等，可以优化网页设计图的质量。
使用Photoshop进行网页UI设计和切图的技巧
使用Photoshop进行网页UI设计和切图的技巧第一章：准备工作在开始进行网页UI设计和切图之前，首先需要准备一些必要的工作。
首先，了解网页设计的基础知识和原则，包括色彩搭配、平衡和对比等。
其次，确定网页设计的尺寸和页面布局，以及主题和风格。
最后，准备好所需要的素材，包括图标、背景图片等。
第二章：UI设计UI设计是网页设计的核心环节，它决定了网页的外观和用户体验。
在进行UI设计时，可以先使用草图或线框图搭建网页的框架和布局。
然后，使用Photoshop的绘画工具，如画笔、橡皮擦等，进行具体的设计。
可以设计网页的背景、导航栏、按钮、表单等元素，并运用各种图层样式、滤镜和渐变效果，增加网页的美感和层次感。
第三章：图层管理在进行UI设计时，图层管理是非常重要的一步。
在Photoshop 中，可以通过图层面板对各个元素进行组织和调整。
可以使用图层文件夹功能，将相同类型的图层放置在同一个文件夹下，便于管理和操作。
还可以使用图层样式和图层组，对图层进行样式和效果的统一。
此外，可以使用锁定和隐藏图层的功能，避免不必要的操作和干扰。
第四章：切图技巧切图是将UI设计转化为实际网页的关键步骤。
在进行切图之前，可以使用Photoshop的标尺和参考线功能，确定准确的切割尺寸和位置。
然后，可以使用选框工具或裁剪工具，进行切割和裁剪。
可以根据需要选择JPEG、PNG或GIF等不同的图片格式，并调整图片的压缩比例和质量。
最后，可以使用切片工具将整个网页切割成多个小的图片，以便在网页中进行加载和显示。
第五章：导出和优化切割完成后，需要对切割的图片进行导出和优化，以提高网页的加载速度和性能。
在导出过程中，可以选择以Web格式保存图片，以减小图片文件的大小。
可以设置透明度、压缩比例和颜色表等参数，优化图片的质量和大小。
此外，可以使用Photoshop的“保存为Web所用格式”功能，预览和比较不同设置下的图片效果，并选择最佳的导出选项。
网页ps设计教学
网页PS设计教学介绍随着互联网的快速发展，网页设计成为了一个非常热门的职业。
在网页设计中，PS（Photoshop）是一个极其重要的工具，它被广泛用于网页元素的设计与处理。
本文将为您介绍如何利用PS进行网页设计。
第一部分：PS基础知识在进行网页设计之前，我们首先需要掌握一些PS的基础知识。
下面是一些基本的PS操作技巧：1. 工具栏：了解各种常用工具的功能和用途，如画笔工具、橡皮擦工具、剪切工具等。
2. 图层面板：学习如何创建、管理和操作图层，掌握图层的不透明度调节、图层样式设置等功能。
3. 选择工具：了解如何选择特定区域或对象，如矩形选框工具、套索工具、魔术棒工具等。
4. 色彩和调整：学会运用调整图像色彩和亮度的功能，如曲线调整、色阶调整、色彩平衡等。
5. 滤镜：掌握PS中各种滤镜的使用方法，如模糊、锐化、扭曲等。
这些基础知识将为您更好地进行网页设计提供基础。
第二部分：网页元素设计在进行网页设计时，我们常常需要设计各种各样的网页元素，如Logo、导航栏、按钮等。
下面是一些常见的网页元素设计技巧：1. Logo设计：Logo是网页的重要标识，设计一个简洁、易识别的Logo对于网页的整体感十分重要。
使用PS来设计Logo时，可以运用各种形状、字体和效果来实现独特的设计。
2. 导航栏设计：导航栏是网页中的核心组成部分之一，设计一个易于导航、美观大气的导航栏至关重要。
使用PS可以制作矢量图形、添加渐变效果、应用阴影等来增强导航栏的可视效果。
3. 按钮设计：网页上的按钮通常用于触发各种操作，如提交表单、跳转页面等。
设计一个醒目、易于点击的按钮可以提高用户的体验。
在PS中，我们可以运用形状工具和图层样式来制作漂亮的按钮效果。
第三部分：网页布局设计网页布局是网页设计中重要的一环。
良好的网页布局可以让用户更好地浏览网页内容。
下面是一些网页布局设计的技巧：1. 栅格系统：栅格系统是网页布局中常用的一种设计方法，通过将网页分割为多个网格，可以更好地组织和调整网页内容。
如何使用Photoshop设计精美的网站界面
如何使用Photoshop设计精美的网站界面Photoshop是一款功能强大的设计软件，广泛应用于网页设计领域。
本文将为您介绍如何使用Photoshop设计精美的网站界面，帮助您提升网页设计的水平。
一、界面布局在设计网站界面之前，首先需要确定网站的整体布局。
常见的布局包括单栏、双栏、三栏、平铺等。
可以使用“新建文件”功能设置画布大小和分辨率，根据界面的宽度和高度进行调整。
二、配色方案选择适合网站主题的配色方案非常重要。
通过Photoshop提供的调色板和渐变工具，可以轻松实现颜色的选择和搭配。
可以根据网站的主题和定位选择冷暖色调、明亮色彩或者柔和的颜色。
搭配合适的配色方案能够提升网站视觉效果和用户体验。
三、字体设计在网站界面设计中，字体的选择和设计也很关键。
合适的字体能够增加网站的整体视觉效果。
可以使用Photoshop中的文本工具进行字体的选择和编辑。
选择与网站主题相符的字体，可以通过调整字体的大小、颜色、字距等属性来达到理想的效果。
四、导航栏设计导航栏是网站界面中最重要的元素之一，需要设计得简洁明了。
在Photoshop中，您可以使用形状工具和渐变工具来绘制导航栏的背景和按钮。
可以加入阴影效果和鼠标悬停效果，提升用户的交互体验和操作指示。
五、图像处理在网站界面的设计中，图像的运用非常重要。
可以使用Photoshop中的图层样式和滤镜效果对图像进行处理和美化。
通过裁剪、调整亮度和对比度、去除杂色等操作，可以优化图像质量和适应网页的要求。
六、按钮设计按钮是网站交互的重要组成部分，合理的按钮设计能够提高用户的点击率和操作体验。
可以使用Photoshop中的形状工具和图层样式来绘制按钮。
可以通过添加颜色、渐变、阴影和边框等属性来实现独特而美观的按钮效果。
七、版面设计网站界面的版面设计需要考虑内容的布局和呈现形式。
可以使用Photoshop中的网格工具和参考线来辅助设计，确保内容的对齐和平衡。
可以通过图层和图层组的建立来管理和控制版面的结构和层次关系。
使用Photoshop设计网页界面和用户界面
使用Photoshop设计网页界面和用户界面第一章：Photoshop设计网页界面和用户界面的概述Photoshop是一种专业的图像编辑软件，广泛应用于网页设计和用户界面设计。
本章将介绍Photoshop设计网页界面和用户界面的基本概念，包括设计原则、布局、颜色选择、字体使用等。
第二章：设计原则在设计网页界面和用户界面时，遵循一些基本的设计原则是非常重要的。
本章将介绍对比度、层次、一致性、简约性等设计原则的应用，以及如何平衡美观性和功能性。
第三章：界面布局界面布局是设计网页界面和用户界面的关键步骤。
本章将介绍常见的布局类型，如固定布局、流布局和响应式布局，并讲解如何选择合适的布局方式以实现用户友好的界面设计。
第四章：颜色选择颜色在网页界面和用户界面设计中起到重要的作用。
本章将介绍如何选择合适的颜色搭配，如何运用颜色心理学原理来传递信息和情感，以及如何使用Photoshop的颜色调整工具来优化颜色效果。
第五章：字体使用字体是界面中的重要元素之一，能够直接影响用户体验。
本章将介绍如何选择适合的字体类型和字号，并讲解如何使用Photoshop的文字工具进行字体样式的调整和设置。
第六章：按钮和导航设计按钮和导航是网页界面和用户界面中最常见的元素之一。
本章将介绍如何设计吸引人的按钮样式和导航结构，以及如何使用Photoshop的形状工具和图层样式来创建独特的按钮和导航效果。
第七章：图像和图标处理图像和图标是网页界面和用户界面设计中常用的元素。
本章将介绍如何使用Photoshop的图像处理功能来优化图像质量和文件大小，以及如何使用矢量图标库来创建可缩放的图标。
第八章：界面交互设计界面交互设计是确保用户界面功能和易用性的重要步骤。
本章将介绍如何使用Photoshop的切片工具和导出功能来生成交互式原型，并讲解如何使用Photoshop进行用户界面的动画设计。
第九章：网页界面和用户界面的优化在设计完成后，对网页界面和用户界面进行优化是必不可少的。
如何利用Photoshop软件制作网页设计
如何利用Photoshop软件制作网页设计如何利用Adobe Photoshop软件制作网页设计在当今数字化时代，网页设计已经成为了各个行业和企业所必备的一项技能。
而Adobe Photoshop作为业界最受欢迎的图像编辑软件，也成为了网页设计师的必备工具之一。
本文将介绍如何利用Photoshop软件制作网页设计，希望能够帮助初学者更好地掌握这一技能。
一、了解网页设计的基本原则在开始使用Photoshop制作网页设计之前，我们需要先了解一些基本的网页设计原则。
首先是色彩搭配，要选择适合网页主题和品牌形象的颜色。
其次是页面结构，要合理地布局各个元素，保证用户的浏览体验。
另外，字体的选择和排版也非常重要，要保证可读性和美观性。
二、准备工作在制作网页设计之前，我们需要先收集素材和了解客户的需求。
素材可以包括公司的Logo、产品图片、模特图片等。
了解客户的需求是为了更好地把握设计方向，满足客户的要求。
三、设计元素的选择和处理在Photoshop中，我们可以通过各种工具和滤镜来处理图片和设计元素。
首先，我们可以使用契合品牌形象的字体来设计页面的标题和主要文本信息。
然后，我们可以根据设计需求选择合适的图片，可以使用剪切工具、调整颜色和大小来处理图片，使其更好地融入设计风格。
四、页面布局和排版在网页设计中，页面布局和排版是非常关键的环节。
我们可以使用Photoshop的图层和导航工具来完成这一部分。
首先，我们可以使用矩形工具来绘制页面的框架和版面。
然后，我们可以使用文本工具来添加文本内容，并使用Photoshop的排版工具来调整字体的大小、行间距等。
五、色彩搭配和图形设计在进行网页设计时，色彩搭配和图形设计也是很重要的一步。
我们可以使用Photoshop的颜色选择器来选择适合设计主题的颜色。
同时，我们可以使用形状工具和画刷工具来设计独特的图形元素，以丰富页面的内容和美观度。
六、导出和切片当我们完成网页设计后，需要将设计导出为网页所支持的格式。
如何使用Photoshop创建完美的网页设计
如何使用Photoshop创建完美的网页设计在当今数字化的时代，拥有一个吸引人且功能齐全的网页对于个人和企业来说都至关重要。
Photoshop 作为一款强大的图像编辑软件，为网页设计师提供了丰富的工具和功能，帮助他们将创意转化为令人惊艳的网页设计。
接下来，我将详细介绍如何使用 Photoshop 来创建完美的网页设计。
一、前期准备在打开 Photoshop 之前，我们需要先明确网页的设计目标和需求。
考虑网页的用途（是商业网站、个人博客还是在线商店？）、受众群体（年龄、兴趣、职业等）以及要传达的主要信息。
同时，收集一些灵感，浏览其他优秀的网页设计案例，分析它们的布局、色彩搭配、字体运用等方面的优点。
确定好设计方向后，根据常见的网页尺寸（如 1920x1080 像素、1366x768 像素等）新建一个文档。
在新建文档时，要注意分辨率设置为 72 像素/英寸，颜色模式选择 RGB 模式。
二、规划布局布局是网页设计的基础，它决定了网页的整体结构和内容的组织方式。
在 Photoshop 中，可以使用矩形选框工具、形状工具和参考线来规划布局。
首先，根据网页的类型和内容，确定是采用单列布局、两栏布局还是多栏布局。
例如，博客类网页通常采用两栏布局，一侧是文章列表，另一侧是文章内容；而电商网站则可能采用多栏布局，展示不同的商品类别。
然后，使用参考线来划分页面的各个区域，如页眉、导航栏、主体内容区、侧边栏和页脚等。
参考线可以帮助我们保持元素的对齐和比例协调。
在规划布局时，要考虑到用户的浏览习惯，将重要的内容放在显眼的位置，并且保证页面的平衡和对称。
三、色彩搭配色彩是网页设计中最具表现力的元素之一，它能够影响用户的情绪和对网页的第一印象。
选择合适的色彩搭配对于创建一个吸引人的网页至关重要。
首先，确定网页的主色调。
主色调应该与网页的主题和品牌形象相符。
例如，科技类网站可能会选择蓝色和灰色作为主色调，以传达专业和创新的感觉；而儿童类网站则可能会选择鲜艳的色彩，如粉色、黄色和绿色。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
在本教程中，你将学会如何在photoshop中制作一个漂亮的绿色的干净的网页效果图。
你将学会一些很时髦的设计技巧，像是如何制作3D丝带，或者是如何设置看上去很专业的渐变色。
出自: 翻译:苏打苏塔设计量贩铺最终效果图看一看我们最终的效果图吧，看上去还不错:>在photoshop中新建文档1在photoshop中新建一个文档，尺寸为980px ×830px.2 如果你在photoshop软件界面中，没有看到在画布的周围看到标尺，点击试图>标尺(Ctrl + R)可以显示标尺。
3 在画布的四个边，分别拖拽四条标尺线。
在这四条线中间，我们将绘制我们的页面创建页面背景4 选择圆角矩形工具(U), 设置圆角半径为10px，设置颜色为#E0E0AC, 在你的整个画布中拖拽一个圆角矩形。
设置这个图层名字为“bg“.5 好了，现在，我们将扩大我们的画布。
首先，缩小我们的画布视图(ctrl+-)，然后点击图像>画布尺寸(Alt + Ctrl + C)，然后根据下面的截图设置参数。
6 再一次选择图像>画布尺寸(Alt + Ctrl + C)，然后根据下面的截图设置参数。
7 在图层面板中点击背景图层，设置前景色为#6C821C，用油漆桶(G)填充背景8 在背景图层上面创建一个新图层，命名为”gradient“.9 在工具栏中选择渐变工具(G)，从画布头部开始向下拖拽出一个从白色到黑色的渐变。
10 设置该图层渲染模式为颜色加深,然后设置图层图层透明度为10%.11 保持该图层仍为选定状态，点击图层>图层蒙版>显示全部。
12 在工具栏中选择渐变工具(G) ，从你的画布底部向上拖拽一个从黑色到透明的渐变。
可以根据下面的截图进行拖。
13 右键单击图层“gradient”,在弹出的菜单中，设定转换为智能元件。
14 点击滤镜>杂点>添加杂点。
根据下图设置参数。
15 新建一个图层，用画笔工具(B)，选择白色的软笔刷，直径为300px,在你的画布顶端，画一条白线。
16 设置这个图层的透明度为50% ,并命名该图层为“highlight“.17 在bg图层上面，新建图层。
点击键盘上的D，设置成默认的前景背景色(前景白色，背景黑色)，然后点击滤镜>渲染>云彩。
18 在图层面板上，右键单击该图层，在弹出的菜单中，设置该图层为智能元件。
命名该图层为“texture“.19 保持图层”texture”仍未选定状态。
点击滤镜>模糊>动感模糊，根据截图进行参数设定20 然后点击滤镜>锐化>锐化。
21 给图层”texture”添加蒙版，点击图层>图层蒙版>显示全部。
22 选择渐变工具(G) ,从画布底部到顶端，拖拽一个黑色到透明的渐变。
23设置图层渲染模式为叠加，设置图层透明度为40%。
设置主要内容的背景24 双击“bg”图层，打开图层属性面板。
根据下图进行外发光的参数设定。
25 新建图层，设置前景色为#2A2009, 选择画笔工具(B) ,用一个比较硬的直径为25px的画笔，在你的圆角矩形的下边缘，画一个圆。
26 在图层面板中右键单击该图层，设置图层为智能对象。
27 然后点击编辑>自由变化(Ctrl + T) ,根据下图进行变形。
28 点击滤镜>模糊>高斯模糊，按照下图进行参数设定。
29 设置该图层的渲染模式为整片叠底，透明度为30%。
最后，给该图层命名为”shadow“, 把这个图层放在bg图层的上面。
创建导航条30 好了，接下来，我们来做导航条。
选择矩形工具(U) ，设置颜色为#D8D8A5.31 在你之前创建的那个大的圆角矩形中，创建一个高为60px的矩形，命名该图层为“navigation bar“.Note: 打开信息面板(F8), 这样你就会看到你所创建的矩形的高度。
32 双击图层“navigation bar”打开图层属性面板，按照下图设置参数33 你可能注意到，我们刚刚创建的矩形并没有圆角。
为了纠正这个小的细节，我们应用剪辑蒙板(clipping mask)这个概念。
右键点击图层“navigation bar”layer, 选择创建剪切蒙版。
34 好了，我们接下来要做的是，创建当前页的按钮。
选择矩形工具(U), 设置颜色为#A6A43F, 创建一个高为60px的矩形。
35 设置透明度为15%，命名该图层为”current page button “.36 然后向下设置剪辑蒙板。
37 选择刚刚的四个图层，点中ctrl然后分别在图层面板中点击这四个图层，然后点击Ctrl + G群组。
设置这个群组名为“bg & navigation bar“.38 选择文字工具(T)，给导航添加一些文字，用颜色#A6A43F. 在这次的设计中，我用的字体是Avenir LT 65 Medium 。
如果你没有这个字体，可以用你喜欢的字体代替。
给“特色项目”部分，自定义一个图案39 好了，我们要创建一个图案。
新建一个文档，文件>新建(Ctrl + N), 尺寸是5px * 5px, 透明背景。
40 设置前景色为#2A2009, 在工具栏中选择铅笔工具(B) ，在你的画布中间，画一个1px大小的方框。
41 点击编辑>定义图案。
命名这个图案，然后点击ok。
好了，你可以关闭这个文件了。
创建“特色项目”区域42 选择矩形工具(U) ,创建一个高为330px的任何颜色的矩形。
43 在图层面板上，双击该图层，打开图层属性面板。
按照下图进行参数设定。
44 命名这个图层为“pattern“.45 选择圆角矩形工具(U), 设置圆角半径8px, 颜色#A6A43F, 创建一个宽940px 高240px的圆角矩形。
46 设置图层透明度为50%，命名该图层为“featured project bg“.47 选择矩形工具(U), 设置颜色#A6A43F, 创建一个尺寸为610px * 220px 的矩形。
这个将会是“特色项目”的图片的位置。
，命名该图层为“image bg.”48 导入任何你喜欢的图片。
(我用的是网站Envato website 的截图).49 把图片放在你刚刚创建的矩形的上面，在图层面板上单击创建图层剪切蒙版。
命名这个图层为“image“.50 选择文字工具(T) ，在右边添加一些文字。
按照下图进行书写。
群组这些文字，命名该群组为“text“.创建按钮call-to-action51 好了，我们要在“特色项目”的底部创建两个按钮。
选择圆角矩形工具(U), 设置半径为8px，颜色为#A6A42F, 创建一个小矩形。
命名该图层为“button 1“.52我们希望按钮的上面不是圆角。
按照下面的操作进行：确定图层”button 1″的蒙版是选中的。
选择直接选择工具(A)，在你看到的路径上单击。
好了，这时候你将看到在每个圆角上都有两个锚点。
选择转换点工具(默认图标是个小钢笔头，在这一组工具中可以找到) ，单击这四个锚点。
再次选择直接选择工具(A)，按住shift键创建直角边。
53 设置该图层透明度为30%.54 然后用文字工具l (T)添加一些文字。
设置颜色为#EAEAB7.55 你也可以添加一些小图标。
如果你喜欢，可以去这里翻翻看。
《30套漂亮的免费图标集》56 群组所有的文字和图标图层，命名太群组为”button 1“.57 创建另一个按钮。
58 为了方便管理，群组所有关于”特色相聚”的图层和群组层，命名这个大的群组为”featured project创建3D丝带59 选择矩形(U) 创建一个高为130px的颜色为#A6A43F的矩形，如下图。
命名该图层为“ribbon background“.60 选择圆角矩形(U), 设置半径为10px ，在你刚刚创建的矩形的左边的位置，拖拽一个矩形。
在这一步，你可以拖拽一些标尺线作为辅助。
61 点击你之前创建的圆角矩形的矢量蒙版，让它被选中。
然后选择圆角矩形(U), 在属性栏中点击从形状减去区的按钮，创建一个圆角矩形。
按照下面的截图进行操作。
62 创建一个新的图层，右键点击设置为创建剪贴蒙版。
63 选择渐变工具(G)，按照下面的截图拖拽一个白色到透明的渐变。
64 设置该图层渲染模式为叠加，透明度为30%，命名为“highlight“.65 选择矩形工具(U), 设置颜色为#878533 ，在图层”ribbon background”上创建一个矩形。
66 选择矩形工具(U), 在属性栏中点击从形状减去区按钮，然后创建一个矩形。
如图。
剪切掉我们不要的那部分。
67 双击图层，打开图层属性面板。
按照下面的截图进行参数设置。
68 重复以上步骤，不过这一次是在丝带的右边。
69 群组所有关于丝带的图层，命名该群组为”ribbon“.70 在图层”ribbon background”上创建一个新图层。
然后按照之前的操作，创建一个阴影。
71 选择圆角矩形工具(U), 设置半径为8px，颜色为#E1E0C1 ，创建四个圆角矩形，大小为220px * 110px.72 设置透明度为50%，然后群组他们。
命名该群组为”images“.73 在工具栏中选择文字工具(T) ，在你的布局下面添加一些文字。
也可以添加一些图标。
74 应用文字工具(T) ，颜色为#E0E0AC 。
在文档的顶端，写上整个站点的名字。
75 双击该图层，打开图层属性面板。
按照下图进行参数设定。
76 然后写标语。
77 为了让效果图更完整，你可以选择四个图片，导入到你的文档中。
放在你的丝带上。
好了，完成了!如果你按照该教程进行学习，你应该能得到下面的效果。
单击这里查看完整效果。
full-scale version。