当前位置:主页 > 平面设计 > PS教程 > 制作实例 > 网页制作

最新发布

用Photoshop做简单的xhtml+css网页
用Photoshop做简单的xhtml+css网页

大家可能不知道,用Photoshop也可以做出简单的xhtml+css网页,一起来试试吧!  1、在photoshop cs2中打开设计好的网站视觉设计稿。用切片工具切好。    2、点 “文件-》存储为web所用格式”, 快捷键为ctrl+alt+shift+s ,点右上倒三角的小图片,选择Edit output settings。    3、见图,在第二个下拉中选择 Slices,选择Generate CSS ,然后在后面的下拉中选By ID。    4、点OK保存并关闭设置窗口,在Save for Web窗口中点Save按扭,在保存类型中选择Html and Images,随便输入一个文件名,点保存。    5、完成任务。看一下代码,是不是xhtml+css的?

2 次浏览
Photoshop打造超酷网站登录界面
Photoshop打造超酷网站登录界面

直接开始我们的教程(注:软件版本为Photoshop CS3)。   我们先看看效果图:  效果图  下面是背景素材和人物素材。  素材1  素材2  打开Photoshop,创建新画布,大小根据个人网站需要而定,这里我们设置为900*650像素。

2 次浏览
新鲜视觉 非常规网页设计作品欣赏
新鲜视觉 非常规网页设计作品欣赏

非常规网页设计作品欣赏,希望能为大家设计网页提供一些新鲜的思路。    Swiths.com  这个网站用了一个大的背景图片。图片上是木地板跟一个人的脚,在地板上的记事本里的文字内容也是网站的内容。    BootB  这个网站用了一个大黑底图,然后在上面还手绘了几朵云,在网页中间是由导航组成的一个圈。    Vesess  Vesess用了一个很简洁的抬头,然后把导航也放到上面,在网站的焦点上是一张图片。你也去觉得这个网站也有什么特别的地方,但是你自己观察就会发现,在它的分栏和列表方面,是有一定突破的。

6 次浏览
Photoshop制作咖啡店主题网站主页
Photoshop制作咖啡店主题网站主页

大家好,今天鼠哥给大家带来个制作简单网站首页的教程,用简单的方法制作主题鲜明的效果。在这里给初学PS的朋友提示哦,因为笔者平时和PS爱好者交流时候,发现很多初学的朋友,对复杂的效果制作很是痴迷,常常把基本的工具丢在一边,基础的知识还是要多花时间去学习的,好的作品不一定是都是通过复杂的制作和大量的特效处理来实现。当然这是笔者的看法。不对的地方希望大家和我一起交流。谢谢支持!  首先看看效果图吧!笔者设想了一个咖啡店为主题的网站主页创意。   效果图  1、开始今天的PS旅途吧,新建文件1024×768- 像素72(制作练习像素)。如图1。  图1  2、设前景色为黑色,alt+Delete将画面填充黑色。新建图层,用选框工具来框选出一个咖啡屋的外形来,进行填充咖啡色。如图2.  图2

6 次浏览
Photoshop打造超酷个性网站登录界面
Photoshop打造超酷个性网站登录界面

废话少说,直接开始我们的教程(注:软件版本为Photoshop CS3)。首先是背景素材和人物素材。 打开Photoshop,创建新画布,大小根据个人网站需要而定,这里我们设置为900X650像素。打开背景素材图,使用移动工具(V)将背景素材拖动到刚刚创建的画布中。

4 次浏览
实例详解PS做网页设计时的配色方案的教程
实例详解PS做网页设计时的配色方案的教程

人们用自己的眼睛和头脑来感受色彩。这不仅仅是物理层面上的,而且包含着精神和情感层面。当我们看色彩时常常想起以前与该色相联系的感受或事物,这种因某种色彩而出现的感受,我们就称之为色彩的联想。色彩的联想是通过过去的经验,记忆或知识而取得的。 这种感受的结果,就是让不同的色彩具有了其特定的意义。色彩的象征意义多数情况下也是一种文化认同。不同文化中色彩所代表的意义和给人产生的联想是大不相同的,有时可能甚至相反。设计师在应用某种色彩之前,要好好调查一下这种色彩的意义以及它在特定环境下将带给人们的联想。3.4.1 红色是最具有视觉冲击力的色彩;暗示速度和动态;可以刺激心跳速度、加快呼吸、刺激食欲;红色的衣服使人身形显大;红色的车最容易被偷,如图3-27所示。图3-27 红色3.4.1.1 红色的具象联想火焰、鲜血、性、西红柿、西瓜瓤、太阳、红旗、口红、中国国旗。3.4.1.2 红色的正面联想激情、爱情、鲜血、能量、热心、激动、热量、力量、热情、活力。3.4.1.3 红色的负面联想侵略性、愤怒、战争、革命、残忍、不道德、危险、幼稚、卑俗。3.4.1.4 红色的文化域在非洲,红色代表死亡。在法国,红色代表雄性。

5 次浏览
优化整体图像(01)
优化整体图像(01)

在Photoshop中,可以通过“存储为Web所用格式”对话框对图像进行优化设置,在该对话框中提供了多种命令,支持各种文件格式的图片。除了对图像整体进行优化外,还可以分别对不同区域的切片进行优化。另外,在优化的过程中,可通过预览框实时的观察图像优化后的画面效果、画面质量和颜色数量等信息。这样既保证了画面效果,又使文件达到了所需的文件体积要求。下面让我们来熟悉该对话框。(1)启动Photoshop,执行“文件”→“打开”命令,打开将要优化的图像。(2)在菜单栏执行“文件”→“存储为Web所用格式”命令,图17-1所示为该对话框。图17-1  “存储为Web所用格式”对话框图17-2中“存储为Web所用格式”命令对话框,各区域的名称和功能如下:A:该区域为对话框的“工具箱”,使用这些工具可以调整预览框的显示、选择切片,以及吸取画面颜色。B:区域中的4个选项卡,分别为“原稿”、“优化”、“双联”、“四联”,选择其中的选项卡可以更改预览区显示原图像的方式。C:单击三角按钮可弹出“预览”弹出式菜单,在该菜单中可以设置颜色显示格式,以及设置调制解调器的速度。D:该区域中的命令和参数,可以对图像的优化方式进行调整与设置,使用它们可以设置图像的画面质量、图像大小和文件格式等。

2 次浏览
优化整体图像(02)
优化整体图像(02)

我们知道网络中最常用的图像文件格式为GIF格式,GIF是一种互联网上常用的文件格式,最多拥有256种颜色,其优点有生成文件小、网络传输速度快等特点。下面主要对GIF格式的优化参数进行介绍。(1)单击“预设”下拉列表右侧的三角按钮,可以看到Photoshop已经为用户预设了多种优化方式。其中列表上端有7种关于GIF文件格式的优化设定,如图17-11所示。图17-11  “预设”下拉列表(2)我们可以选择其中一种优化方式对当前图像进行优化,然而这7种预设优化方式远远满足不了对高质量图像优化的需求,所以仍需要手动调整这些参数来优化网页图像。(3)图像文件的颜色越丰富,那么其文件体积就越大。反之,则越小。“减低颜色深度算法”下拉选项,可以通过更改图像的整体的颜色深度来优化文件体积,图17-12所示为“减低颜色深度算法”下拉列表中的9种选项。图17-12  “减低颜色深度算法”下拉列表中的选项(4)在下拉列表中选择“可感知”选项后,可以将图像中肉眼能够察看到的颜色保留下,而察看不到的颜色将被优化掉。图17-13所示为当选择“可感知”选项后其颜色表的显示状态

5 次浏览
优化整体图像(03)
优化整体图像(03)

减少图像中的颜色数量可以有效的降低图像的体积,使用“颜色表”可以精确控制GIF图像中的颜色数量。最多可以设定图像的颜色为256种,降低颜色数量的同时文件体积也会下降。除了添加和删除颜色,在“颜色表”还可以进行颜色替换或更改透明度等操作。(1)在“存储为Web所用格式”对话框中的“颜色表”选项卡中,可以看到颜色表中有许多一致的颜色,如图17-28所示。图17-28  颜色表中的颜色(2)单击颜色表中的色块后,可将该颜色选择,如果按下<Ctrl>键的同时,逐个单击色块,可以选择多个色块。如图17-29所示,选择颜色表中颜色相似的色块。提示:当色块被选择后,其周围将出现黑白相间的边框。图17-29  选择颜色(3)选择颜色后,单击颜色表中的“删除选中的颜色”按钮,可将颜色表中所选择的颜色删除,图17-30所示为将颜色表中的颜色被删除后的状态。注意:切勿将相近的颜色全部删除,应适当的保留不同色相的颜色。

4 次浏览
分别对切片进行优化
分别对切片进行优化

网页界面根据功能的需要建立了很多的切片,在不同的切片下可以设置不同的网页链接或网页特殊效果。建立切片后整幅网页界面也被分成了若干个小的图片。这些切片图片有些画面内容丰富,需要拥有较多的颜色信息,而有些则内容简单,这时我们就可以对内容简单的切片进行优化,使其在最大幅度上降低颜色信息,同时也降低整个网页的体积。在对切片进行优化之前,首先让我们来了解一下切片,切片是图像的一块矩形区域,可用于在Web页中创建链接、翻转和动画效果。通过将图像划分成切片,可以更好地对图像进行控制,也便于网络下载。将图片存储为网页格式时,整幅网页界面图像将根据切片的划分方法,切割为一幅幅的小的图片。如图17-34所示为具有切片的图像效果。图17-34  具有切片的图像效果在Photoshop中包含两种切片即用户切片、自动切片。使用Photoshop的“切片”工具可以直接创建的为用户切片,根据网页需要用户切片可以被移动、复制、组合、排列、对齐和分布,还可以对其单独应用优化设置。而自动切片都链接在一起并共享相同的优化设置。创建用户切片时,自动切片将填充图像中用户切片未定义的空间。根据用户切片的形状和位置,自动切片会分成很多的块面,但是在对自动切片进行优化设置时,系统将所有的自动切片视为一张图片进行优化。如图17-35所示,用每种类型的切片都显示不同的图标,用户切片显示为蓝色图标,而自切片显示为灰色图标。图17-35  用户切片和自动切片的外观区别

6 次浏览
共计33条记录 1 2 3 4 下一页