推荐阅读
精选国外非常吸引人的旅游门户网站设计欣赏
其实酒店和旅游类的网站最能体现多媒体内容和文字的搭配技巧了,这类网站通常需要营造氛围,展现美感,体现吸引力,优秀的案例比比皆是。今天我们就来看一组优秀的案例。现如今的旅游和酒店类网站设计的越来越带感了,壮美的风景和精致的界面融为一体,优质的服务和梦幻般的界面让用户在网站中流连忘返。这些网站以惊艳的图片和视频立足,配合以突出的现代网页设计技术,结合当下的设计趋势,视差滚动、全景图片、响应式布局、动态图片一个都不缺席。这些网站巧妙地将多媒体技术、文字排版和特效平衡为一体,为用户提供了身临其境的体验。>Pygmy ElephantPygmy Elephant 是一个旅游机构,网站为用户提供了逼真而难忘的视觉体验。其中涵盖的多媒体类型丰富,通过丰富的视觉体验鼓励游客踏上旅程。网站使用了视频背景,漂亮的图文混排,精致的交互细节。>Cruise Me为了让项目效果突出,设计和开发团队使用了诸多先锋的技术。当用户打开网站的时候能够看到首页上交互性极强的地图,每个地标都能够为用户提供丰富的信息以便浏览和了解。再向下,用户可以翻看不同主题不同旅游项目的卡片,有目的和针对性地了解具体信息。整个网页的设计友好而令人愉悦。>Bird Luxury Travel PR
PHOTOSHOP绘作逼真蕃茄
4.画个大椭圆,羽化20,反选,增加亮度30。 5.取消选择后,用加深和减淡工具处理周边,上面和两边减淡,底部加深。使用加深和减淡工具的时候,需要不断的尝试,这时最好给图像做个历史快照,或是复制一层来做,这样便于修改,涂抹时次数是很多的,不一会就数十次了,在历史记录中可恢复不了。 6.蕃茄有几个瓣,现在来做这几条陷下去的纹。画个椭圆,用选择-变换选区旋转和移动到适合的位置,羽化1,在凹纹的位置用减淡工具檫。 7.反选后用加深工具檫。 8.同样方法做出余下的陷纹。观察整体,再对局部作一些加深增强立体感,可加轻微杂色,数量约1。 9.给这个层命名“蕃茄”,新建一层,在上部画个小椭圆,羽化3,填充灰白性线渐变,将图层模式设为“颜色加深”,作为蒂部位下陷的暗调。向下合并到蕃茄。 10.新建一层,命名“茄蒂”,用钢笔仔细钩出蒂的形状,填充绿色(46/77/27)。 11.绘画实物时,离不开我们的好帮手――加深和减淡工具。刚接触时,我也是极为头痛的,它们不象图层样式那样,调节参数就可以得到效果的,不容易掌握。但只要经过耐心的练习和尝试,你会发觉它们实在是可爱极了。处理茄蒂时可用钢笔辅助钩出叶瓣,也需要载入茄蒂的选区,用轻移、旋转、羽化、反选等动作来得到我们需要的工作选区。完成后加杂色1.5%。
Photoshop打造斑驳压纹镂空文字效果
简 介】 利用PS可以打造出各种各样奇特的文字效果,下面我们来制作一款压纹镂空文字…… 先看一下效果: 效果图 制作工具:Photoshop CS 制作过程: 1、新建一个宽度为100像素,高度为100像素,分辨率为350像素的文件。 2、新建图层1,单击工具箱中的“自定义形状工具”,在其属性栏中单击路径按钮,并在形状下拉面板中选择五角星图案,然后在窗口中拖拽创建一个五角星路径,如图01所示。
自己动手用Dreamweaver制作活动菜单条
用QQ聊过天的朋友都对它的自动隐藏窗口功能爱不释手,它可以使窗口显得清爽整洁而且富有动感,笔者的几个朋友都想在自己的网页中加入类似的东东,经过共同摸索发现用Dreamweaer就可以实现这种效果,下面我们通过一个活动菜单条的制作来看看吧。 第1步:制作菜单外貌 图1 在Dreamweaer中新建一个文件,绘制一个层,在该层中插入一个表格(如图1),对该表格进行修饰,然后加入菜单项并建立各项的超链接,为了去掉超链接的下划线,可以编辑超链接的CSS样式,在CSS样式面板中通过CSS选择器将“Link”和“Hover”的“Decoration(装饰)”均设置为“None(无)”,将“Hover”的“Color(颜色)”设置为红色,最后将设置好的样式应用到各个菜单条中(可按“F12”键预览效果)。 第2步:设计菜单的动态效果 1、选定层面,当鼠标变成“十”字形时按住左键将层面拖动到页面右上角(使整个菜单条完全露出但上边缘正好靠拢页面上边界),在窗口菜单中打开时间线面板,选定层面将其拖动到时间线上,Dreamweaer会自动产生一个长度为15帧的动画对象,拖动该动画对象的最后一个关键帧到第30帧,将其长度设置为30帧。然后在第15帧处单击右键,在弹出的快捷菜单中选择“添加关键帧”选项插入一个关键帧,并将层面拖动到适当位置(如图2)。在时间线窗口中的第15帧处再次单击右键,在弹出的快捷菜单中选择“添加动作”,为该帧添加一个交互行为,Dreamweaer将自动打开行为面板。单击行为面板中的“+”按钮,从弹出的菜单中选择“Timeline/Stop Timeline”,打开“Stop Timeline”对话框,选择“Timeline1”后单击“确定”按钮关闭该对话框。交互行为的事件为“onFrame15”,动作为“Stop Timeline”,这样当时间线运行到第15帧时,动画将停止播放,这样就实现了菜单条弹回的功能。图2 2、用同样的方法在时间线的第30帧处也添加一个“Stop Timeline”的交互行为,这样就实现了菜单弹出的功能。添加了这两个交互行为后,在时间线窗口的相应帧上面都出现了一个蓝色方块,它代表一个交互行为。选择“自动播放和循环”复选框,使动画能够自动循环播放(如图3)。图3
最新发布
卫星转动效果
文 / donger卫星转动效果(二) 三、再用椭圆形工具画一个圆,填充色选为黄色,在info面板中设置W和H都为25。 四、打开effect面板,如果当前文件中没有这个面板,请选择window->effect。在下拉菜单中选择Fireworks4自带的外置滤镜eye candy 4000 le->motion trail 五、在这个滤镜的对话框中进行如下设置,角度为353度,length设为20,taper设为5,overall opacity设置为95。点击OK按钮。完成卫星尾巴的制作。 六、选择这个小圆,执行菜单命令modify->conver to bitmap,把这个带尾巴的圆变成一个位图,这样的好处是,在接下来的运动制作过程中,由实时特效滤镜所造成的卫星尾巴会跟着自身转动,如果不变成位图的话,就需要在各个点中转变角度。这也算是一个偷懒的方法吧。
空间环绕
文 / donger空间环绕(五) 十三、在Layers面板中选择Layer3。按下Ctrl+v,粘贴刚才所复制的渐变色矩形,用指针工具移动到如下图所示的位置。因为Layer3处于目前的最高层,所以它在所有对象的上面,覆盖住了文字层。
撕纸边缘效果制作方法详解
源文件下载请点击这里。 大家可能会经常看到一些图像的边缘有一些类似于撕纸的效果。关于这种特效制作的方法大家可能也见到了很多,这里我们通过使用FWMX 2004自带的Alien Skin Splat LE滤镜中的Edges滤镜特效来进行撕纸边缘效果的制作,应该说能够很轻松的实现,首先一起来看一下已经制作完成的效果图: 接下来,我们一起来看看具体的制作步骤。 1、打开FW,新建一个文件,文件大小根据需要自定,此处采用背景色为白色。 2、使用矩形工具在编辑区绘制一个矩形对象,颜色采用“#FFCC00”,编辑区此刻如下图所示。 3、选中矩形对象,执行属性面板上的效果菜单命令中的Alien Skin Splat LE滤镜中的Edges效果命令,在弹出的Alien Skin Splat! Edges设定窗口中,选择菜单命令“Settings Small Tears”,如下图所示。 4、接下来,对面板上的各个参数进行再次的调整。将Edge Width、Margin和 Feature Size三个选项进行如下图所示的设定,在右侧的预览框内,我们可以发现矩形对象的边缘已经初步生成了我们预期需要的撕纸效果了。 【注意】:如果在进行上面的第3步操作时,不执行相应的菜单命令,而是直接对面板上的各个参数进行调整的话,矩形的边缘又会产生另外的一种效果。Edge Width、Margin和 Feature Size三个选项的各项参数设置如下图所示,将Edge Mode选择为 Torn Paper选项, 并同时选择“Transparent Fill ” 前面的复选框。单击Random Seed 按钮,每单击一次,其后面文本框内的数值就会发生相应的变化,而与其相对应的预览框内的矩形对象的边缘效果也会发生相应的变化。
网页设计综合实例(上)
在本文中我们将帮助您亲身体验Fireworks在网页创作中的强大功能,我们通过一个网站页面的设计过程,为您详细介绍Fireworks在网页设计的不同阶段是如何处理各种不同任务的。通过解决您所遇到的每一个具体的任务,您将对Fireworks的主要功能有一个统一的全局性的了解,同时为您在设计中如何利用Fireworks提供一个清晰的思路。下图是这个教程完成后的外观: 二、 自动任务处理。 由于我们在后面将多次使用这个处理过程对位图进行加工,因此可以利用Fireworks提供的自动处理功能加快我们后面的工作,这种自动任务处理可以有很多种途径,我们介绍其中最常用的三种: 1 保存为一个Command。打开历史面板History,选定最后两步Effect纪录,在弹出菜单中选择Save as Command,将这两个步骤保存为一个可执行的Command,命名为BMPmodify。以后我们需要时只需执行Commands菜单下的这个BMPmodify命令即可。
网页设计综合实例(下)
八、 建立切片 我们的基本导航及页面结构已经建立好了,现在到了增加切片的时候了。Fireworks中的切片是输出图形及产生交互的主要参考物件,导出的文档将根据切片来将图形切割成不同的部分,并在浏览器中通过表格组装到一起。同时,所有的交互行为也是通过切片之间的联系来产生的,如翻转图、弹出菜单等等。 1、 我们前面建立的按钮本身已经带有了自己的切片,因此我们需要对其他对象建立各自的切片。 2、 创建切片通常使用工具面板中的Slice工具直接绘制 ,但如果想创建精确大小的切片,我们可以选择对象并执行右键菜单中的Insert Slice自动插入切片。 3、 我们使用工具面板中的Slice工具在页面中间绘制一个信息显示切片,我们将在下一步把导航条的每个按钮相关信息显示在这里。 6、 当您选择了Image格式时,需要在下部的两个窗口设置Up和Over状态的菜单样式,您的悬想也许和我们这里的不同,这是因为我们使用了自定义的样式文件。我们可以根据不同设计项目的需要将自定义的样式作为弹出菜单的选项。 7、 我们首先绘制一个最终的弹出菜单的矩形,并设定好需要的填充、描边和特效。如下图:
立体贴图字特效制作
源文件下载请点击这里 本节介绍的特效字效果为立体贴图字。首先先来看看下图所示的图形效果。 3、选中文本对象,按“Ctrl+X”组合键,剪切它,选中导入的位图对象,选择菜单命令“修改蒙版粘贴为蒙版”,这样,第1步所示范文字的贴图效果就实现了。 4、接下来就要给贴图文字实现一种立体特效了。选中组合的蒙版对象,选择属性面板上效果菜单中的“Eye Candy 4000 LEBevel Boss” 效果命令。在弹出的“Bevel Boss”设定框中进行如下图所示的设定。
Fireworks4极速教程
文 / 5D多媒体 Candy一、初识Fireworks4.0 Fireworks是一个强大的网页图形设计工具,你可以使用它创建和编辑位图、矢量图形,还可以非常轻松的做出各种网页设计中常见的效果,比如翻转图象,下拉菜单等,设计完成以后,如果你要在网页设计中使用,你可以将它输出为html文件,还能输出为可以在photoshop,illustrator和flash等软件中编辑的格式。文件窗口 Fireworks 的文件窗口上有四个标签,可以同时编辑和预览图象,你可以同时预览四种不同的优化设定所产生的效果,选择最理想的一种设定。工具条 工具条上包括各种选择、创建、编辑图象的工具,有的工具按钮的右下角有一个小三角,说明这个工具包含有几种不同的形式,按住这个工具不放就能显示其他的形式。
Fireworks4功能介绍
译 / www.loadskill.com Donger 这是一个演示,将带你感受在一个典型站点中创造几个新页面的全过程。本演示按照这个过程的不同阶段被分成几个部分。如果你需要更多的帮助信息,在Fireworks里也包括了一个帮助。 第一步:安装 Fireworks:CD中包括了Fireworks的安装程序。CD中还有Alien SKIN提供的Alien Skin Eye Candy的演示版本。安装Eye Candy文件夹到你的xtras文件夹中。 Dreamweaver 4 CD中包括了Dreamweaver Demo版的安装程序。 Macromedia Flash 5 CD中包括了Macromedia Flash 5 Demo版的安装程序。 在我们开始以前,先讲一个名词--“选择物体”: 在这整个演示中,我将经常提起“选择物体”这个名词。意思是,在工具栏中选择指针工具,点击你想选择的物体。如果想一下子选择多个物体,你也能这样做。方法有两种:
Fireworks4遮罩全接触
文/Donger遮罩 Fireworks的遮罩是一项很有用的图形处理方法。使用遮罩您可以为各个对象制作出自己想要达到的光影明暗效果;您可以轻易地把一张彩色的位图图片中的颜色改成同一色系的颜色;您还可以在文字内部填充上不同的图案颜色……。Fireworks 4.0加强了对遮罩技术的支持,您可以非常方便在适当的场合制作出丰富多彩的遮罩效果.。下面我们来一一介绍以下几部分内容。 遮罩的基本概念 创建图像遮照的几种方法 创建路径遮罩的几种方法 通过剪贴板制作遮罩效果 对多个对象使用遮罩
微软Windows徽标做法一例
源文件下载 文章的题目使用了图标做法一例,而不是使用的制作方法详解,是因为考虑到了大家对于该图标的制作方法都可能有自己独特的方法,所以本节的内容就算是抛砖引玉之举吧!希望大家能够从中学到对自己有用的知识,我想这就足够了。教程开始之前,还是首先来看一个效果图,如下所示: 3、为了便于随后的操作,将编辑视图放大到400%视图状态,进行随后的编辑。 5、右侧的节点调节手柄不是我们需要的,仍然单击键盘上的ALT键,单击路径节点,向左上方拖动鼠标,即可将上方的路径调节手柄拖动出来,如下图所示。 6、拖动左上方的调节手柄,通过调整其长度及其方向做出上侧边缘的圆弧效果,如下图所示。