推荐阅读
Photoshop合成森林里梦幻仙子场景图片教程
本教程教程将向您展示如何将一个人物融入一个梦幻般的背景。您还将了解如何使色彩、灯光和对比度调整,融入这个美丽的作品。这个教程不适合基础差的PS人。下面一起来学习吧。降低饱和度的效果图:步骤1 - 背景打开背景和削减你感兴趣的部分我们要给予更多的知名度主题,所以让我们在这里套用一些模糊。复制背景层,添加高斯模糊。[滤镜>模糊>高斯模糊)数值取决于在画面上,它并不总是相同的。(我一般使用的范围之间5PX和10px)
HTML 5 canvas 基本语法
5 规范引进了很多新特性,其中最令人期待的之一就是 canvas 元素。HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大。每一个 canvas 元素都有一个"上下文( context )" (想象成绘图板上的一页),在其中可以绘制任意图形。浏览器支持多个 canvas 上下文,并通过不同的 提供图形绘制功能。 提供图形绘制功能。 5 规范引进了很多新特性,其中最令人期待的之一就是 元素。HTML 5 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大。每一个 元素都有一个"上下文( context )" (想象成绘图板上的一页),在其中可以绘制任意图形。浏览器支持多个 canvas 上下文,并通过不同的 提供图形绘制功能。大部分的浏览器都支持 2D canvas 上下文——包括 Opera, Firefox, Konqueror 和 Safari。而且某些版本的 Opera 还支持 3D canvas ,Firefox 也可以通过插件形式支持 3D canvas :本文介绍 2D canvas基础以及如何使用基本 canvas 函数,如线条、形状、图像和文字等。为了理解此文章,你最好了解 JavaScript 基础知识。可以点击此处批量下载本文实例代码创建 canvas 的方法很简单,只需要在 HTML 页面中添加 <canvas> 元素:<canvas id="myCanvas" width="300" height="150"> Fallback content, in case the browser does not support Canvas. </canvas> 为了能在 JavaScript 中引用元素,最好给元素设置 ID ;也需要给 canvas 设定高度和宽度。创建好了画布后,让我们来准备画笔。要在画布中绘制图形需要使用 JavaScript 。首先通过 getElementById 函数找到 canvas元素,然后初始化上下文。之后可以使用上下文 API 绘制各种图形。下面的脚本在 canvas 中绘制一个矩形 (点击此处查看效果):// Get a reference to the element. var elem = document.getElementById('myCanvas'); // Always check for properties 和 methods, to make sure your code doesn't break // in other browsers. if (elem && elem.getContext) { // Get the 2d context. // Remember: you can only initialize one context per element. var context = elem.getContext('2d'); if (context) { // You are done! Now you can draw your first rectangle. // You only need to provide the (x,y) coordinates, followed by the width and // height dimensions. context.fillRect(0, 0, 150, 100); } } 可以把上面代码放置在文档 head 部分中,或者放在外部文件中。介绍了如何创建 canvas 后,让我们来看看 2D canvas API,看看能用这些函数做些什么。上面的例子中展示了绘制矩形是多么简单。
如何利用离机镜头获得创意影像
“freelensing”(离机镜头)这个名词可能听起来有些陌生,但是当你把镜头从单反相机的卡口上卸下来,并且将它放在离卡口约几厘米远的地方,你仍然可以拍摄照片。离机镜头技巧,就是通过改变镜头的角度,来使焦平面发生平移或者歪斜。这能创造出美妙的、绘画般的效果。摄影教程 多加练习 虽然操作过程看起来非常简单直接,但是也非常容易发生错误。得到一张成功照片的几率并不是那么高,你需要反复试验不同的镜头倾斜角度——将镜头倾向光源方向,来避免漏光。要想让镜头两次停留在同一个位置几乎是不可能的,所以想要重复成功的拍摄经验极其困难。这是这一技巧最令人困扰、同时也是最具有回报值的一个特点——只要你坚持,很快就能看到成效。显而易见的是,如果将镜头取下,相机的感应器就会直接暴露在空气中,所以在操作时要十分小心,完成拍摄之后要立即对感应器进行清洁。 拍摄到理想的画面之后,你可以使用图像处理软件为你的杰作加上复古的效果。接下来就是详细的操作介绍…… 如何利用离机镜头获得创意影像 1. 设为手动 应用这一技巧时,最好使用高速的定焦镜头,如50mm f/1.4,不过原则上来说,使用任何镜头都可以得到不错的效果。将镜头设为其最大光圈(如f/1.4),并将焦点位置手动设置在无穷远处。将相机设为手动拍摄模式,选择一个恰当的快门速度。此时无法使用相机的自动模式,所以要仔细检查曝光设置。
最新发布
用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的?
Photoshop打造超酷网站登录界面
直接开始我们的教程(注:软件版本为Photoshop CS3)。 我们先看看效果图: 效果图 下面是背景素材和人物素材。 素材1 素材2 打开Photoshop,创建新画布,大小根据个人网站需要而定,这里我们设置为900*650像素。
新鲜视觉 非常规网页设计作品欣赏
非常规网页设计作品欣赏,希望能为大家设计网页提供一些新鲜的思路。 Swiths.com 这个网站用了一个大的背景图片。图片上是木地板跟一个人的脚,在地板上的记事本里的文字内容也是网站的内容。 BootB 这个网站用了一个大黑底图,然后在上面还手绘了几朵云,在网页中间是由导航组成的一个圈。 Vesess Vesess用了一个很简洁的抬头,然后把导航也放到上面,在网站的焦点上是一张图片。你也去觉得这个网站也有什么特别的地方,但是你自己观察就会发现,在它的分栏和列表方面,是有一定突破的。
Photoshop制作咖啡店主题网站主页
大家好,今天鼠哥给大家带来个制作简单网站首页的教程,用简单的方法制作主题鲜明的效果。在这里给初学PS的朋友提示哦,因为笔者平时和PS爱好者交流时候,发现很多初学的朋友,对复杂的效果制作很是痴迷,常常把基本的工具丢在一边,基础的知识还是要多花时间去学习的,好的作品不一定是都是通过复杂的制作和大量的特效处理来实现。当然这是笔者的看法。不对的地方希望大家和我一起交流。谢谢支持! 首先看看效果图吧!笔者设想了一个咖啡店为主题的网站主页创意。 效果图 1、开始今天的PS旅途吧,新建文件1024×768- 像素72(制作练习像素)。如图1。 图1 2、设前景色为黑色,alt+Delete将画面填充黑色。新建图层,用选框工具来框选出一个咖啡屋的外形来,进行填充咖啡色。如图2. 图2
Photoshop打造超酷个性网站登录界面
废话少说,直接开始我们的教程(注:软件版本为Photoshop CS3)。首先是背景素材和人物素材。 打开Photoshop,创建新画布,大小根据个人网站需要而定,这里我们设置为900X650像素。打开背景素材图,使用移动工具(V)将背景素材拖动到刚刚创建的画布中。
实例详解PS做网页设计时的配色方案的教程
人们用自己的眼睛和头脑来感受色彩。这不仅仅是物理层面上的,而且包含着精神和情感层面。当我们看色彩时常常想起以前与该色相联系的感受或事物,这种因某种色彩而出现的感受,我们就称之为色彩的联想。色彩的联想是通过过去的经验,记忆或知识而取得的。 这种感受的结果,就是让不同的色彩具有了其特定的意义。色彩的象征意义多数情况下也是一种文化认同。不同文化中色彩所代表的意义和给人产生的联想是大不相同的,有时可能甚至相反。设计师在应用某种色彩之前,要好好调查一下这种色彩的意义以及它在特定环境下将带给人们的联想。3.4.1 红色是最具有视觉冲击力的色彩;暗示速度和动态;可以刺激心跳速度、加快呼吸、刺激食欲;红色的衣服使人身形显大;红色的车最容易被偷,如图3-27所示。图3-27 红色3.4.1.1 红色的具象联想火焰、鲜血、性、西红柿、西瓜瓤、太阳、红旗、口红、中国国旗。3.4.1.2 红色的正面联想激情、爱情、鲜血、能量、热心、激动、热量、力量、热情、活力。3.4.1.3 红色的负面联想侵略性、愤怒、战争、革命、残忍、不道德、危险、幼稚、卑俗。3.4.1.4 红色的文化域在非洲,红色代表死亡。在法国,红色代表雄性。
优化整体图像(01)
在Photoshop中,可以通过“存储为Web所用格式”对话框对图像进行优化设置,在该对话框中提供了多种命令,支持各种文件格式的图片。除了对图像整体进行优化外,还可以分别对不同区域的切片进行优化。另外,在优化的过程中,可通过预览框实时的观察图像优化后的画面效果、画面质量和颜色数量等信息。这样既保证了画面效果,又使文件达到了所需的文件体积要求。下面让我们来熟悉该对话框。(1)启动Photoshop,执行“文件”→“打开”命令,打开将要优化的图像。(2)在菜单栏执行“文件”→“存储为Web所用格式”命令,图17-1所示为该对话框。图17-1 “存储为Web所用格式”对话框图17-2中“存储为Web所用格式”命令对话框,各区域的名称和功能如下:A:该区域为对话框的“工具箱”,使用这些工具可以调整预览框的显示、选择切片,以及吸取画面颜色。B:区域中的4个选项卡,分别为“原稿”、“优化”、“双联”、“四联”,选择其中的选项卡可以更改预览区显示原图像的方式。C:单击三角按钮可弹出“预览”弹出式菜单,在该菜单中可以设置颜色显示格式,以及设置调制解调器的速度。D:该区域中的命令和参数,可以对图像的优化方式进行调整与设置,使用它们可以设置图像的画面质量、图像大小和文件格式等。
优化整体图像(02)
我们知道网络中最常用的图像文件格式为GIF格式,GIF是一种互联网上常用的文件格式,最多拥有256种颜色,其优点有生成文件小、网络传输速度快等特点。下面主要对GIF格式的优化参数进行介绍。(1)单击“预设”下拉列表右侧的三角按钮,可以看到Photoshop已经为用户预设了多种优化方式。其中列表上端有7种关于GIF文件格式的优化设定,如图17-11所示。图17-11 “预设”下拉列表(2)我们可以选择其中一种优化方式对当前图像进行优化,然而这7种预设优化方式远远满足不了对高质量图像优化的需求,所以仍需要手动调整这些参数来优化网页图像。(3)图像文件的颜色越丰富,那么其文件体积就越大。反之,则越小。“减低颜色深度算法”下拉选项,可以通过更改图像的整体的颜色深度来优化文件体积,图17-12所示为“减低颜色深度算法”下拉列表中的9种选项。图17-12 “减低颜色深度算法”下拉列表中的选项(4)在下拉列表中选择“可感知”选项后,可以将图像中肉眼能够察看到的颜色保留下,而察看不到的颜色将被优化掉。图17-13所示为当选择“可感知”选项后其颜色表的显示状态
优化整体图像(03)
减少图像中的颜色数量可以有效的降低图像的体积,使用“颜色表”可以精确控制GIF图像中的颜色数量。最多可以设定图像的颜色为256种,降低颜色数量的同时文件体积也会下降。除了添加和删除颜色,在“颜色表”还可以进行颜色替换或更改透明度等操作。(1)在“存储为Web所用格式”对话框中的“颜色表”选项卡中,可以看到颜色表中有许多一致的颜色,如图17-28所示。图17-28 颜色表中的颜色(2)单击颜色表中的色块后,可将该颜色选择,如果按下<Ctrl>键的同时,逐个单击色块,可以选择多个色块。如图17-29所示,选择颜色表中颜色相似的色块。提示:当色块被选择后,其周围将出现黑白相间的边框。图17-29 选择颜色(3)选择颜色后,单击颜色表中的“删除选中的颜色”按钮,可将颜色表中所选择的颜色删除,图17-30所示为将颜色表中的颜色被删除后的状态。注意:切勿将相近的颜色全部删除,应适当的保留不同色相的颜色。
分别对切片进行优化
网页界面根据功能的需要建立了很多的切片,在不同的切片下可以设置不同的网页链接或网页特殊效果。建立切片后整幅网页界面也被分成了若干个小的图片。这些切片图片有些画面内容丰富,需要拥有较多的颜色信息,而有些则内容简单,这时我们就可以对内容简单的切片进行优化,使其在最大幅度上降低颜色信息,同时也降低整个网页的体积。在对切片进行优化之前,首先让我们来了解一下切片,切片是图像的一块矩形区域,可用于在Web页中创建链接、翻转和动画效果。通过将图像划分成切片,可以更好地对图像进行控制,也便于网络下载。将图片存储为网页格式时,整幅网页界面图像将根据切片的划分方法,切割为一幅幅的小的图片。如图17-34所示为具有切片的图像效果。图17-34 具有切片的图像效果在Photoshop中包含两种切片即用户切片、自动切片。使用Photoshop的“切片”工具可以直接创建的为用户切片,根据网页需要用户切片可以被移动、复制、组合、排列、对齐和分布,还可以对其单独应用优化设置。而自动切片都链接在一起并共享相同的优化设置。创建用户切片时,自动切片将填充图像中用户切片未定义的空间。根据用户切片的形状和位置,自动切片会分成很多的块面,但是在对自动切片进行优化设置时,系统将所有的自动切片视为一张图片进行优化。如图17-35所示,用每种类型的切片都显示不同的图标,用户切片显示为蓝色图标,而自切片显示为灰色图标。图17-35 用户切片和自动切片的外观区别