06_网页_使用Photoshop设计一个高档时尚的网页

合集下载

使用Adobe Photoshop软件创建网页设计的步骤

使用Adobe Photoshop软件创建网页设计的步骤

使用Adobe Photoshop软件创建网页设计的步骤Adobe Photoshop是一款功能强大的图像处理软件,广泛应用于网页设计领域。

它提供了丰富的工具和功能,使得设计师可以轻松创建出令人惊艳的网页。

本文将介绍使用Adobe Photoshop软件创建网页设计的步骤和技巧。

1. 确定设计风格在开始设计之前,首先需要确定网页的整体风格和主题。

这可以根据网页的需求和目标受众来确定。

例如,如果是一个艺术品展示网站,可以选择一种独特的、具有艺术气息的设计风格。

而如果是一个企业官网,可能更适合选择简洁、专业的设计风格。

2. 设计网页布局接下来,需要设计网页的整体布局。

可以利用Adobe Photoshop的画布功能来创建一个适合网页的大小,并将画布分割成不同的区域。

这样可以更好地组织和安排网页的内容。

比如,可以将头部、导航栏、主要内容区域和底部等部分分开,并为每个区域设计合适的样式和排版。

3. 创建导航栏和标志导航栏是网页中非常重要的一部分,需要设计一个易于导航和视觉上吸引人的导航栏。

可以使用Adobe Photoshop的形状和文本工具来创建导航栏的按钮和标签,并为它们添加相应的样式和效果。

同时,还可以设计一个与网页主题相关的标志,用于展示网站的品牌和身份。

4. 添加图片和图形图片和图形是网页设计中不可或缺的元素。

可以使用Adobe Photoshop的选择、剪切和调整工具来处理和编辑图片,使其适应网页的需求。

还可以添加一些图形元素,如图标、背景纹理等,以增加网页的视觉吸引力。

同时,要注意图片和图形的大小和加载速度,避免影响网页的加载性能。

5. 设计主要内容区域主要内容区域通常是网页的核心部分,需要设计一个清晰、易于阅读和浏览的布局。

可以使用Adobe Photoshop的文本和段落样式工具来设计网页的标题、段落和列表等内容。

还可以添加一些视觉效果,如颜色、字体、阴影等,以增强内容的可读性和吸引力。

如何用Photoshop制作网页设计图

如何用Photoshop制作网页设计图

如何用Photoshop制作网页设计图第一章:网页设计图的基本要素网页设计图是指在Photoshop中创建的一种视觉呈现,用于展示网页的布局、颜色、字体等设计元素。

在制作网页设计图时,需要注意以下几个基本要素:1. 页面尺寸:合适的页面尺寸可以确保网页在不同设备上显示完整。

常见的页面尺寸有1200px、1920px等。

在Photoshop中,可以通过选择“新建”来设置页面尺寸。

2. 布局结构:网页设计图应该包含网页的整体布局结构,如头部、导航栏、正文、侧边栏、底部等。

根据设计需要,可以使用参考线和网格来辅助布局。

3. 颜色方案:选取合适的颜色方案是网页设计中至关重要的一步。

Photoshop提供了丰富的颜色选择工具,如调色板、渐变工具等。

可以根据品牌色彩和网页主题选择合适的颜色。

4. 字体和排版:选择适合网页内容和风格的字体是网页设计的关键。

在Photoshop中,可以通过文本工具选择合适的字体、大小、行间距等,并进行对齐、调整字距等操作。

第二章:利用图层和样式创建网页元素在网页设计中,常见的元素有按钮、图标、标题、背景等。

借助Photoshop的图层和样式功能,可以轻松创建这些元素:1. 图层:使用图层可以将设计元素分开管理,方便修改和调整。

可以通过图层面板对图层进行命名、分组、调整不透明度等操作。

2. 图层样式:Photoshop提供了丰富的图层样式,如阴影、边框、渐变等。

通过在图层样式对话框中进行设置,可以快速添加元素的样式效果,使网页看起来更加美观。

3. 矢量图形:矢量图形可以无损放大,并能保持其清晰度和光滑度。

在Photoshop中,可以使用形状工具绘制矢量图形,并进行填充、描边、变换等操作。

第三章:优化和导出网页设计图在制作网页设计图后,还需要进行一些优化和导出操作,以确保图像加载速度和质量:1. 图像优化:使用Photoshop的图像处理工具,如图像调整、图像压缩等,可以优化网页设计图的质量。

PS如何制作高端大气上档次的网站首页界面图

PS如何制作高端大气上档次的网站首页界面图

PS如何制作高端大气上档次的网站首页界面图PS如何制作高端大气上档次的网站首页界面图2015-07-09 Photoshop PS图像设计界面设计网站首页界面就像一本杂志的封面,直接决定是否能吸引用户翻开或者点击进入继续阅读,所以一个好的网站首页界面必须是精美而又能抓住用户眼球的。

下面这篇教程就教大家如何制作一个高端大气上档次的网站首页界面。

感兴趣的小伙伴们赶紧跟着小虎一起来学习一下吧!最终完成的效果图:所需素材1 所需素材2一、打开PS,创建一个900*650px的新画布(具体根据个人网站需要而定)。

打开所需素材1,用移动工具(V)将背景素材拖到新画布中。

效果如下:二、选择菜单:滤镜>渲染>光照效果。

参照下图设置:三、用矩形选框工具(M)建立一个选区。

再新建一个图层,填充色为白色,按住Ctrl+T键变形四、双击图层打开图层样式,设置选择投影参数如下,确定按Ctrl+J复制一层,按Ctrl+T 变换角度五、按Ctrl 键点击图层,调出选区,选择菜单:执行选择>变换选区,按住Alt键,缩小选区,选择菜单:执行选择>存储选区,保存选区。

六、将所需素材2直接拖进来,调整大小。

选择菜单:执行选择>载入选区,将之前存储的选区载入,选择>反选,删除。

七、新建一个图层,选择箭头笔刷工具绘制下所示效果。

选择菜单:执行编辑>变换>变形。

变形设置参照下图。

八、输入文字“Enter”。

双击图层打开图层样式,选择投影参数设置,参照下图:九、按住Ctrl + T键,调整文字层的位置及角度,输入网站版权申明文字。

双击图层打开图层样式参数设置如下图:十、输入标题文字,采用与“Enter”层相同的图层样式。

完成最终效果。

总结:这篇案例最重要的是图片的选择以及对图层的调整。

小伙伴们也可以根据自己的灵感创作出更美的网站首页界面。

如何在Photoshop中设计出色的电子商务界面

如何在Photoshop中设计出色的电子商务界面

如何在Photoshop中设计出色的电子商务界面在Photoshop中设计出色的电子商务界面并不是一件难事,只需要掌握一些基本的技巧和方法,即可创作出令人印象深刻的界面。

以下是一些关于如何在Photoshop中设计出色的电子商务界面的技巧。

首先,选择合适的色彩方案是非常重要的。

色彩可以影响用户对界面的感知,因此需要选择适合产品类型和品牌风格的色彩。

可以使用色轮工具或者参考色彩搭配网站上的配色方案来选择合适的颜色。

另外,使用渐变和阴影效果可以增加界面的层次感和现代感。

其次,界面的布局也是关键因素。

在设计电子商务界面时,需要考虑到产品展示的重要性,确保产品的主要信息能够吸引用户的注意力。

可以使用网格系统或参考其他成功的电子商务网站的布局方式来设计。

同时,需要合理安排界面的各个元素,确保用户能够快速找到所需信息。

再次,选择合适的字体非常重要。

字体可以传达品牌的形象和风格,同时也影响用户对文字信息的阅读体验。

在选择字体时,需要注意字体的可读性和配合界面整体效果的情况。

可以使用不同字体风格的组合来突出不同的信息层次。

另外,图标和按钮也是界面设计中不可或缺的元素。

图标和按钮可以使用户更加方便地进行操作和导航。

在选择图标和按钮时,需要注意风格的一致性和显眼性。

可以利用Photoshop的形状工具和图层样式来创建各种图标和按钮。

此外,合理运用图片和照片可以增强界面的吸引力。

可以使用高质量的产品图片来展示商品,吸引用户的注意力。

同时,使用合适的照片可以增加界面的情感和美感。

需要注意的是,选择的图片和照片要与产品类型和品牌风格相符,并尽量控制图片大小,保证网页加载速度。

最后,要时刻关注用户体验。

在设计界面时,需要考虑到用户的使用习惯和需求,确保界面的易用性和功能性。

可以进行用户测试或参考其他成功的电子商务网站来改进界面设计。

此外,还可以使用一些互动效果来增加用户的参与感和满意度。

通过掌握以上的技巧和方法,我们可以在Photoshop中设计出色的电子商务界面。

如何使用Photoshop设计精美的网站界面

如何使用Photoshop设计精美的网站界面

如何使用Photoshop设计精美的网站界面Photoshop是一款功能强大的设计软件,广泛应用于网页设计领域。

本文将为您介绍如何使用Photoshop设计精美的网站界面,帮助您提升网页设计的水平。

一、界面布局在设计网站界面之前,首先需要确定网站的整体布局。

常见的布局包括单栏、双栏、三栏、平铺等。

可以使用“新建文件”功能设置画布大小和分辨率,根据界面的宽度和高度进行调整。

二、配色方案选择适合网站主题的配色方案非常重要。

通过Photoshop提供的调色板和渐变工具,可以轻松实现颜色的选择和搭配。

可以根据网站的主题和定位选择冷暖色调、明亮色彩或者柔和的颜色。

搭配合适的配色方案能够提升网站视觉效果和用户体验。

三、字体设计在网站界面设计中,字体的选择和设计也很关键。

合适的字体能够增加网站的整体视觉效果。

可以使用Photoshop中的文本工具进行字体的选择和编辑。

选择与网站主题相符的字体,可以通过调整字体的大小、颜色、字距等属性来达到理想的效果。

四、导航栏设计导航栏是网站界面中最重要的元素之一,需要设计得简洁明了。

在Photoshop中,您可以使用形状工具和渐变工具来绘制导航栏的背景和按钮。

可以加入阴影效果和鼠标悬停效果,提升用户的交互体验和操作指示。

五、图像处理在网站界面的设计中,图像的运用非常重要。

可以使用Photoshop中的图层样式和滤镜效果对图像进行处理和美化。

通过裁剪、调整亮度和对比度、去除杂色等操作,可以优化图像质量和适应网页的要求。

六、按钮设计按钮是网站交互的重要组成部分,合理的按钮设计能够提高用户的点击率和操作体验。

可以使用Photoshop中的形状工具和图层样式来绘制按钮。

可以通过添加颜色、渐变、阴影和边框等属性来实现独特而美观的按钮效果。

七、版面设计网站界面的版面设计需要考虑内容的布局和呈现形式。

可以使用Photoshop中的网格工具和参考线来辅助设计,确保内容的对齐和平衡。

可以通过图层和图层组的建立来管理和控制版面的结构和层次关系。

使用Adobe Photoshop软件进行网页设计的流程指南

使用Adobe Photoshop软件进行网页设计的流程指南

使用Adobe Photoshop软件进行网页设计的流程指南在当今数字化时代,网页设计的重要性已经不容忽视。

一个令人满意的网页设计可以吸引用户,并提升网站的可用性。

而Adobe Photoshop作为一款强大的图像编辑软件,被广泛应用于网页设计中。

本文将为您提供使用Adobe Photoshop软件进行网页设计的流程指南。

第一步:需求分析在开始任何设计工作之前,需求分析是至关重要的。

与客户或团队共同讨论,明确网页设计的目标和要求。

了解目标用户群体,确定网站的定位和风格。

第二步:构思和草图一旦需求明确,我们可以开始构思和制作草图。

这一阶段的重点是将想法和概念转化为具体的设计方案。

使用纸和铅笔或工具软件,快速绘制草图,探索不同的布局和排版方式。

第三步:界面设计在进入Photoshop软件之前,我们需要预先规划网页的界面设计。

根据需求和草图,决定页面布局、色彩搭配和字体选择。

通过合理组合元素,实现整体的和谐统一。

第四步:图像处理Adobe Photoshop软件的核心功能是图像处理。

在网页设计中,我们通常需要对图片进行裁剪、调整尺寸和优化,以确保页面加载速度和视觉效果。

使用Photoshop的选择工具,轻松选择和处理图像。

第五步:界面元素设计网页设计中,各种交互元素如按钮、图标和导航栏是不可或缺的。

在Photoshop中,我们可以通过绘制形状、使用样式和插入矢量图形等方式设计这些元素。

利用软件提供的各种工具和功能,创造出独特、吸引人的界面元素。

第六步:文本编辑文本在网页中扮演着重要的角色。

通过选择适当的字体、调整大小和颜色,我们可以使文本信息更加醒目和易读。

Photoshop提供了强大的文本编辑工具,可以轻松编辑和排版文本。

第七步:图层管理在复杂的网页设计中,合理的图层管理至关重要。

通过使用Photoshop的图层功能,我们可以轻松管理不同元素的叠加关系、修改样式和调整位置。

将不同元素分别放置在不同图层上,方便后续的编辑和调整。

如何利用Photoshop软件制作网页设计

如何利用Photoshop软件制作网页设计

如何利用Photoshop软件制作网页设计如何利用Adobe Photoshop软件制作网页设计在当今数字化时代,网页设计已经成为了各个行业和企业所必备的一项技能。

而Adobe Photoshop作为业界最受欢迎的图像编辑软件,也成为了网页设计师的必备工具之一。

本文将介绍如何利用Photoshop软件制作网页设计,希望能够帮助初学者更好地掌握这一技能。

一、了解网页设计的基本原则在开始使用Photoshop制作网页设计之前,我们需要先了解一些基本的网页设计原则。

首先是色彩搭配,要选择适合网页主题和品牌形象的颜色。

其次是页面结构,要合理地布局各个元素,保证用户的浏览体验。

另外,字体的选择和排版也非常重要,要保证可读性和美观性。

二、准备工作在制作网页设计之前,我们需要先收集素材和了解客户的需求。

素材可以包括公司的Logo、产品图片、模特图片等。

了解客户的需求是为了更好地把握设计方向,满足客户的要求。

三、设计元素的选择和处理在Photoshop中,我们可以通过各种工具和滤镜来处理图片和设计元素。

首先,我们可以使用契合品牌形象的字体来设计页面的标题和主要文本信息。

然后,我们可以根据设计需求选择合适的图片,可以使用剪切工具、调整颜色和大小来处理图片,使其更好地融入设计风格。

四、页面布局和排版在网页设计中,页面布局和排版是非常关键的环节。

我们可以使用Photoshop的图层和导航工具来完成这一部分。

首先,我们可以使用矩形工具来绘制页面的框架和版面。

然后,我们可以使用文本工具来添加文本内容,并使用Photoshop的排版工具来调整字体的大小、行间距等。

五、色彩搭配和图形设计在进行网页设计时,色彩搭配和图形设计也是很重要的一步。

我们可以使用Photoshop的颜色选择器来选择适合设计主题的颜色。

同时,我们可以使用形状工具和画刷工具来设计独特的图形元素,以丰富页面的内容和美观度。

六、导出和切片当我们完成网页设计后,需要将设计导出为网页所支持的格式。

如何使用Photoshop制作网页设计

如何使用Photoshop制作网页设计

如何使用Photoshop制作网页设计Photoshop是一款功能强大的图像处理软件,其灵活的工具和丰富的功能使其成为网页设计师的首选软件之一。

在本文中,我将详细介绍使用Photoshop制作网页设计的步骤,并逐点列出详细内容。

1. 确定设计目标:- 确定网页的用途和风格。

例如,是一个博客、电商平台还是企业官网。

根据网页的用途确定相应的设计风格和布局。

- 确定色彩方案和排版。

选择适合网页用途和风格的色彩搭配,并确定合适的字体和排版方案。

2. 创建新的文件:- 打开Photoshop并选择“新建”创建一个新的文件。

- 输入适当的文件尺寸和分辨率。

通常,网页设计的分辨率为72dpi,并根据需要选择合适的文件尺寸。

3. 设置网格和参考线:- 在“视图”菜单中选择“显示”和“网格”,以便在设计过程中对齐元素和布局。

- 可以根据需要通过“视图”菜单选择“参考线”来设置垂直或水平的参考线,以帮助排版和布局。

4. 绘制页面布局:- 使用矩形工具创建主要的页面布局。

根据需要创建头部、导航栏、侧边栏、内容区等。

- 使用对齐工具和参考线对齐元素,并使用自由变换工具调整大小和形状。

5. 添加图像和素材:- 在设计中添加所需的图像和素材。

可以使用选框工具或插入菜单选项中的“图像”来添加图像。

- 借助现有的素材库或自己设计的矢量图形,通过拖放或复制粘贴的方式添加到设计中。

6. 美化设计元素:- 使用各种Photoshop工具和滤镜对设计元素进行美化。

例如,使用画笔工具添加阴影、高光或纹理效果,使用滤镜调整图像的色彩和对比度等。

7. 添加文本内容:- 使用文本工具添加所需的文本内容。

可以选择适当的字体、字号和颜色,然后输入所需的文本。

- 使用文本工具的各种选项,如描边、阴影、对齐等,来优化文本的呈现效果。

8. 调整图层和组织文件:- 使用图层面板来对设计进行分组和排序,以便更好地管理和编辑。

- 使用文件菜单中的“存储为”选项将文件保存为psd格式,并及时保存进度,以防止数据丢失。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

使用Photoshop设计一个高档时尚的网页在本教程中,我们使用简洁细瘦的字体,配上优美的背景图片,经过精心排布的空间布局,设计一个高档的网页。

当你看完本教程,你再去看看我们的姐妹站点NETTUTS,然后跟着做,这样我们就用简洁的HTML代码实现设计。

来吧,让我们开始!大家好!我在数年前通过阅读Photosho p教程开始进入设计领域,而后创建了PSDTUTS。

我希望这个站点可以帮助和鼓舞其他人!除了PSDTUTS 之外,我还在一家叫做Envato的大公司里做了很多不同站点,完成了很棒的项目。

首先我们开始设计。

(点击下图可见大图)一个优雅的设计可能符合设计者的文件夹类型站点的需求,但是可能要根据各种各样的原因而改变。

这一切取决于要有良好的版面,结构化的布局以及具有视觉吸引力的背景。

设计真正的力量在于向您展现如何在保持设计简洁的同时并完成。

在教程中Photo shop部分的最后,我将向您展示如何轻易地更换背景和字体,并阐述这样设计良好效果的原因。

结构很简单:横向菜单,主标题面板和内容区。

尽管是设计主页,你也可以想象一下内部页面可能也就是具有不同的主题面板和新的内容区。

出于简洁的考虑,我们将只讲解主页的设计。

首先新建一个文档。

我创建的是宽1100px高1100px的文档。

这个文档可以用于宽为1024px的站点,仍然还有空间去决定在可视区域之外如何布置,这样在更大屏幕下也很好的适应。

现在第一步先创建一个美观抽象背景。

我们使用从#1b204c到#472373这两种颜色按照线性递减绘制背景。

第二步现在我们要一个吸引眼球的背景,足够抽象到不会干扰人阅读文字。

很走运,在GoMedia‟s Arsenal站点里有一张很棒的免费水彩图片,点击“freebie (免费赠品)”区,你就能找到两张水彩图片;我们要的是绿色那张。

现在这样很开心了,你按下CTRL+I将图片反置,会在黑色为底的背景上呈现漂亮的粉紫色,这样就更酷了!现在把处理过的水彩图片拷贝到主画布上,按下CTRL+T键,将其调整到适当大小。

这里我们要将右边淡化为黑色(这样在后面我们可以更方便地编辑我们的HTML代码)。

另外,我们也不想在竖直方向过长,因此最好擦掉一些超出的地方。

选取一个画刷,选用黑色擦去底下部分。

注意最好选取带有一些纹理的画刷,这样擦去部分不会显得很明显。

如果你向下滚动画刷列表,有一个Pho tosho p自带的像图例中的画刷。

这个画刷也能用,当然你可能有其他更漂亮的画刷,用起来更加自如。

你选中以后,在右边和底下区域黑色填充,这样这层就覆盖在整个画布上了。

现在将水彩图层的透明度减少到70%左右,将覆盖模式设置为混合模式。

这样一些颜色头出来显得更加美观。

第五步现在在水彩图层之上再新建一个图层,然后从下至上从黑色到透明做线性递减绘制,这样基本上整个画布到底部就褪化为黑色了。

第六步下一步在两个新图层中,绘制一组白色到透明的光线梯度,逐步扩大。

将这些设置为覆盖,最外圈和最小圈的透明度分别设置为40%和100%。

基本上你应该在图像上做高亮设置,显得更多的纹理。

第七步现在就是最后完工的背景了。

深色、抽象,颜色也相当别致。

当然一般来说粉色可能不是你的最爱,如果这样的话,在顶层图层上再加一种颜色图层做调整。

我比较喜欢粉紫色,我就这么干了!第八步现在我们创建一个新图层,加上一个“图标”。

我本来没有打算做它,因此我决定只是放一些文字做我的图标。

因为这个教程一半在PSDTUTS,另一半在NETTUTS,我就写“psd vs net”几个简单字而已。

这里我用的字体是Egyptian505 BT粗体和Egytian505 LT BT Light(这个字体更淡的版本我用在…vs…上了)。

要让…vs‟抬起来一些,可以在字体面板的基线控制(在下面第二幅图里展示)。

最后还要给文字加上一点淡淡梯度重叠和1个像素的内部白光。

第九步现在这一步打开标尺(按下CTRL+R)绘制一组引导线。

分别在50px,320px,610px,900px分别绘制四条线将页面划分为三栏。

至少这些是我已经用过的数值。

看看我的屏幕截图,我才发现第三条线已经出界了。

哦!反正我已经所有元素放入空间里去了。

但是如果要做多重页面,可能就按照其他方式用网格。

像这样只是设计主页,我打算用一次这三栏——一会儿以后。

来,现在我们绘制第一个黑色方框。

保持标尺和引导线打开状态,新建一个图层从一边到另一边绘制一个方形选取框。

用黑色填充,再将透明度设置为80%,右键点击图层选择混合选项。

点击“比划”,然后在外边加1px的白色笔画,设置为重叠模式。

这样边界看起来更酷,黑色盒子看起来更锐利。

现在复制方框所在图层,按CTRL+T调整方框大小,保持宽度不变,高度变短(如下图所示)。

这就是我们的浏览框。

将透明度设置为40%,填充设置为50%。

这样这个方框看起来更淡,给两个方框添加了一些深度感,让人觉得主次分明,有所侧重。

这种两个方框的对比方式可以很好用来表现元素之间的视觉差异。

用户浏览该页面,我们首先想让他们看到大块信息,然后才是浏览栏。

将其淡化处理意在告诉用户这部分并不是要想突出的地方,可以稍后再看。

第十二步来,我们现在加上一些文字。

这里我仍给大标题使用Egyptian Light字体(在最终的HTML代码中这里是一幅图片),菜单栏使用Arial字体(这里将是HTML文字链接)。

这里给出关于字型的一些建议。

这样的设计很大程度上取决于我们使用一种简洁字型。

漂亮大方的文字显得非常大气,同时它是一种细瘦字型,因此看起来十分优雅。

如果你在寻找一个高端设计外观,细瘦经典的字型必不可少。

当我第一次看到Helvetica超幼体的时候,我记得疯狂地将它应用到所有设计中,设计看起来的确既简洁又高档。

另外,Egyptian这种特别字体具有非常笔直的衫线,又有一种方形感觉,看起来很酷(我的感觉)。

还有其他很多很棒的字体可以使用。

但是一般来说要用一些更为经典的字体。

换句话说,除非你确定知道你的需求,否则最好还是不要使用那些样子奇怪的字体——比方说一些看起来具有未来派的字体。

实际上一个有效总体原则就是除非你自信满满,否则还是选择一些更为普通的字体。

另外一种用在这里效果非常不错的字型是那种位技术——看起来像是Chris Garrett Media用的字体。

我也不知道这是什么字体,或者这种类型的字体叫什么,不过非常简洁。

也许一个热心的印刷达人在评论里告诉我们的。

不管怎样,看完Chris Garrett Media的站点之后,我决定给字体上再加一个梯度覆盖,增加一些亮光,这样看起来更酷。

你在下面可以看到,这里我们正在添加一个从黑到白的梯度覆盖,在覆盖模式下淡化一点。

第十四步现在我们再画一个大黑框作为内容区。

实际上你可以复制先前的涂层,然后做一些调整。

这样我们就实现下图所示的样子了。

看起来相当酷吧!!第十五步现在我们在内容框里加一些假内容。

这里我还是给大多数文字用Arial字体,但是标题没用Egyptian,我用了Geo rgia字体。

Geo rgia没有那么优雅,但是也是个标准字体,可以放在之前的HTML代码里用作标题,可以不用图像或者Flash。

实际上,随着Windows Vista的发布又有一种叫做Cambria的半标准字体产生。

但是在苹果上火狐浏览器特定尺寸下Cambria存在一些奇怪的渲染问题,因此我们现在还是用表现稳定的Geo rgia字体。

最后我在底部新建一个新图层,用深紫色填充,在顶部加1px的边界,瞧,就有个页脚了。

把以上这些放在一起,准备建站了。

点击查看清晰效果图可选背景一这个设计很酷地方之一就是更换背景图片很容易,换了以后依然很炫。

这里我换了一张从iStockPhoto站点叫做“Passio n”的图片做背景,其颜色策略相似。

这是一张很酷的3D光线渲染图,像我们现在用的背景一样,也是抽象派,看起来很炫目。

可选背景/颜色二这里我又换了一张iStockPho to站点的叫做“Blue Energy”的抽象图片做背景。

因为颜色变了,所以通览一遍,将一些地方的颜色做了修改——特别是文字地方——再在主图层上添加一个亮光。

为什么奏效现在你可能也不会想这个详细设计了——既然我已经写了完整教程。

现在谈一谈为什么有这个效果,这样可以帮助你用这些原则来创建你的专属页面这里是本次设计的几条原则:1.首先,我挑选了几张很炫的背景图片。

用几张iStock的图片和一张GoMedia图片可以做出来很好看图片。

虽然很好看,但是不会喧宾夺主。

他们也很容易淡出。

一般容易淡化的图片更容易处理。

2.好图片一定要搭配简洁的字体排版。

因为图片已经很可爱了,就没有必要过分强调字体。

一定要是清爽明了,井井有条。

3.作品另一个因素就是有足够空间。

在复杂背景下,很容易看东西就一团糟,所以元素之间,方框以内等地方要保持足够的空间。

空间宽裕也是让设计看起来更为高档的好方法。

没人喜欢乱七八糟的下等设计。

诚然还有很多其他方面的东西可以谈,像颜色、优先级等,但是我认为这里需要关注的主要设计元素还是字体和背景的搭配。

最后总结一下,这里一幅小图就说明一切了:-)。

相关文档
最新文档