推荐阅读
精选国外非常吸引人的旅游门户网站设计欣赏
其实酒店和旅游类的网站最能体现多媒体内容和文字的搭配技巧了,这类网站通常需要营造氛围,展现美感,体现吸引力,优秀的案例比比皆是。今天我们就来看一组优秀的案例。现如今的旅游和酒店类网站设计的越来越带感了,壮美的风景和精致的界面融为一体,优质的服务和梦幻般的界面让用户在网站中流连忘返。这些网站以惊艳的图片和视频立足,配合以突出的现代网页设计技术,结合当下的设计趋势,视差滚动、全景图片、响应式布局、动态图片一个都不缺席。这些网站巧妙地将多媒体技术、文字排版和特效平衡为一体,为用户提供了身临其境的体验。>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
最新发布
Fireworks MX使用教程--教你缺角矩形的制作
1. 新建一个宽为150象素,高为100像素的文件,背景色任意。 2. 选中工具面板中的矩形工具,在编辑区画一个矩形。 3. 选择工具面板矢量部分的“刀子工具”,并且按住Shift键,把矩形右上角的边框进行切割。 4.切割后的图片: 5.点选“工具”面板中的“部分选定”工具。 6.选择顶点。 7.按键盘上的DEL键删除。 8.继续把左角变成缺角。选择“工具”面板矢量部分的“钢笔”工具。 9.在左下角的两个边框等距离各单击一下。
Fireworks MX使用教程--如何制作漂亮的Mac按钮
新建一个文件,背景色自定。使用圆角矩形工具,在编辑区绘制一个圆角矩形,矩形宽120象素,高40象素,矩形圆度为50。 2.选中这个圆角矩形,在属性面板上,描边设为无,填充方式为线性,填充颜色设置为灰色到白色。选取油漆桶工具,从上向下拖动。 3.打开层面板,选中当前图层,拖到“新建复制层”按钮上,复制一个新层。 5.选中层2,将填充方式变为实心,填充颜色为白色。在菜单栏,选择修改,变形,数值变形,将宽高都设置为90%。 8.选中切割后的图形,打开效果面板,选择模糊,高斯模糊,数值为2.7。 9。点击层1前的锁图标,给层1解锁,选中层1下的图层,调整效果选项,选择“斜角和浮雕”,“内斜角”,设置如下图。 10.继续选择效果命令,选择“阴影和晕光”,“发光”命令,将颜色设置为灰色,具体设置如下图。
用FW MX 制作 Mac风格边框
以前大家常用线条来表现浅浮雕效果,现在我们在Fireworks MX(以下简称FW MX)里可以用效果(Effect)面板来轻松制作。 如下图则是用线条来制作的一个Mac风格的边框,我们用FW MX打开源文件就会发现制作比较繁琐,有没有简单的方法来制作呢?答案是肯定的,方法就是用效果(Effect)面板!本例用来说明用FW MX制作边框的过程,希望能为FW MX爱好者提供一个新的思路。.png文件 1.打开FW MX,建立一个340X110的新文件。 2.从工具栏中选择“矩形”工具或按快捷键(U),画一个328X98,填充色为(#CECFCE)无边框的矩形(以下如无说明,所画矩形都为无边框)。 3.要想达到如下图所示的图形时,必须要使用菜单栏:修改==>组合路径==>打孔和联合来制作了。 按U键画一个320X73的矩形,填充为黑色。移动至合适的位置,本例中为距左4PX,距下为5PX。同时选中两个矩形,使用打孔命令,但得到了效果和我们要求的图形还是有差别的,没关系,画一个18X18的矩形,置于右下角,菜单栏:修改==>组合路径==>联合就得到了我们要求的图形。
Fireworks MX 制作燃烧效果
在photoshop里大家一般用刮风、波浪滤镜再加上通道等技术来做出很好的炙热燃烧效果,作为一个Fireworks爱好者,我更希望Fireworks也能做出这样美妙的效果。现在,Fireworks MX新功能提供了很强的像素图处理能力,我试着用其中的涂抹、淡化等工具制作燃烧效果,一样很不错。 制作步骤: 一.首先建立一个500X400的画布,因为需要涂抹,范围太小不好操作,填为黑色,如下图: 二.在制作燃烧文字之前,我们先练习制作一组火苗,这对理解火焰的走势有帮助。如下图,拖画三个椭圆形,分别填充为黄、橙、红色,调整大小位置,做下图的排列,这样形成焰芯、内焰、外焰的轮廓。 将它们群组,复制几个调整大小,方向,组成“火”字形,如图: 三.全选,同时按下ctrl+shift+alt+z组合键,将这组图形转化为位图,选择菜单Filters-blur-blur more对图形进行模糊处理,接下来便是让它“燃烧”起来!使用涂抹工具,对图形进行加工。这是最关键的步骤,点击涂抹工具后,最下面出现属性栏(Properties),其中的各个参数值的效果大家必须熟悉。如下图,其中Size:涂抹范围大小,Pressure:压力强度,Edge:尖锐程度(可以理解为羽化范围),Smudge Color:涂抹的初始“痕迹”颜色,去掉方框内的对号,表示不用初始颜色,在这里我们将它去掉。
Fireworks MX 模拟灯泡效果
Fireworks MX 增加了一些像素图处理功能以后,我们不仅可以用它做出很好的矢量图,另外完全还可以用它做出很多漂亮的像素图像。 下面就是Fireworks MX 做出的仿真灯泡,左边是透明的灯泡,右边是磨砂灯泡,效果很逼真吧! 本实例主要运用了贝塞尔曲线工具(钢笔)、渐变、羽化、阴影、新增的“Burn tool”和“Dodge tool”等。 一、磨砂灯泡的制作 1. 建立新文件,用圆角矩形工具拖出一个矩形框,使用次选工具调节两端的节点,如图: 2.再复制3个,依次整齐排列,最好使用Alignment面板。然后使用“Modify/Combine/Union”命令,使他们成为一个整体,调整上下两端的节点,再用线性渐变(Linear)填充,具体设置如图。你也可以使用其他你习惯的方法做出相同的效果。 3. 使用“Ctrl+A”全选,选择“Modify/Flatten Layers”,使之变成位图之后,用“Skew Tool”变形工具稍做变形。(注意:如果不转化成位图,扭曲后只是形状发生变化,里面的填充并不随着变化,仍是平行的线性渐变填充,所以一定要转化成位图。)用矩形工具绘制一个适当的倒立梯形,并填充黑色,位置如图: 4.再分别用Fireworks MX提供的新功能 “Burn tool”和“Dodge tool”在适当的地方进行碳化和添加高光。在使用这两个工具时一定要调整好参数,下手要利落、干净,轻重也要掌握好,其实这步操作也是较麻烦的。经过这步操作后就有了金属螺旋的感觉,进行适当缩放。具体设置和效果如图:
巧用FW MX的笔触制作宣纸书法
如果你是一名设计师或者你正建设着自己的网站,为了设计出独特而富有个性的作品,不可避免的要和很多的字体打交道。字体虽然众多,很多时候难以满足我们特殊的设计需要,本来嘛,被统一了风格的字体又怎么能表现出我们脑海中无穷的创作欲望与设计思想呢?这时候我们不得不自己动手来制作一些艺术字体来解决问题。利用Fireworks MX可以很好地设计艺术字,它提供的丰富笔触与矢量路径编辑工具足以发挥我们所有的灵感与激情。 大家知道,在宣纸上用毛笔进行书写时,由于墨汁的扩散,在字的边缘会有轻微的毛边,这也是书法作品的一大特点。但是我们使用任何字体都无法达到这种效果。下面,我们就以这个宣纸书法的艺术字实例来领略Fireworks MX笔触的风采。 步骤1: 打开Fireworks MX使用菜单命令File New新建文件,宽与高均为300像素,背景色为白色。 步骤2: 在工具栏上选择文字工具(Text Tool)(如图1), 用鼠标在画布上单击后,输入文字“网络”。在工作区域下方的Properties面板上选择填充色为黑色,字体为舒体,文字大小为150(如图2)。 步骤3:
Fireworks MX 滤镜讨论
大家都知道利用滤镜可以轻松的制作出一些特殊的效果,本文中我们将尝试Fireworks MX进一步增强的滤镜功能,并学习如何安装第三方滤镜。 如果你有使用Fireworks4.0的经验,你就知道滤镜功能是放置在Xtras菜单下的。但是你会疑惑的发现在Fireworks MX中Xtras菜单居然不见了,是的,Macromedia公司为了更好的与传统的图形软件统一,将Xtras改为了Filters,更符合我们平时的称呼习惯。(如图1) 新增滤镜功能: 步骤1: 启动Fireworks MX,打开我们在上一节所制作的图片。 步骤2: 在菜单栏选择Filters选择项。你会发现与Fireworks4.0相比,增加了一种滤镜类型:Alien Skin Splat LE,选择它,出现子菜单edegs,这是一个用来调整图形边缘的滤镜。单击它,进入功能界面(如图2)。 步骤3: 我们可以看到在功能界面的左上角有三个滑动条,分别控制边缘的宽度,边缘的空白,边缘填充的形体的大小。如图调整这三个滑动条的数值(如图3)。 步骤4: 在滑动条的下方是一个填充方向控制图标,我们可以直接用鼠标在图标上选择填充的角度也可以直接在文本框中输入数值。我们使用0度进行填充,大家也可以试着使用其他不同的角度进行填充,看看效果有什么不同(如图4)。 步骤5: 在功能界面下方的edge mode下拉框中选择pixels项,这是选择以什么方式进行边缘填充。Color功能控制使用什么颜色对边缘进行填充,不用进行修改,我们就使用默认的白色。如果你在transparent Fill前的选择框打上勾,就将以透明色进行填充(如图5)。
Fireworks MX制作像素动画
众所周知,Fireworks MX是一款非常优秀的GIF格式动画制作软件,但是很多朋友在制作动画的时候除了文字的移动,渐变很少做其他的效果,实在是对Firewrks MX强大功能的极大的浪费。其实只要我们有一些想象力,多在动画形式上下工夫,可以制作出很多与众不同的动画作品。 下面我们就以一个简单的像素动画为例子,看看怎样只使用几种最基本的编辑工具来制作特具特色的像素动画。 步骤6: 打开Frame and History面板,点击右上角的三角按钮,在弹出的菜单中选择Duplicate Frame复制一个Frame,在弹出的Duplicate Frame对话框中如图进行设置(如图10)。 步骤7: 向右侧移动像素的位置,并改变小人的造型,向左适当移动圆环的位置(如图11)。 步骤8: 使用同样的方法复制Frame3、Frame 4、Frame 5、Frame 6,并且改变小人与圆环的位置,最后每一个Frame 上的图形分别如图所示(如图12、13、14、15)。 步骤9: 在Frame and History面板上双击Frame 1,将时间间隔调整为25毫秒(如图16),并且用同样的方法调整所有Frame 的时间间隔。 步骤10: 点击“播放“按钮,可以看到整个动画的效果,像素小人飞身跃过滚动的圆环,只要你稍加改变就可以得到更多的不同动画。
Fireworks MX之旅:滤镜
fwmx不支持ps6以上版本的滤镜,那么fwmx对于其他第三方滤镜的支持情况又怎样呢?今天我们一起来看看fwmx在滤镜方面的改善。 还记得介绍fwmx界面时说过,fw4时代的xtras的名称在fwmx里被改成了filters,应该说含义更准确了。 同eyes candy 4000一样,如果想得到这个滤镜系列其他滤镜是需要掏钱的。 看完了新增加的滤镜,再来看看fwmx如何安装其他的滤镜。 fwmx如何安装其他滤镜 按下ctrl+u,弹出preferences对话框。可以看到这里还是和fw4一样没有任何变化,抱着试一试的想法,我在photoshop plugin那一项还是填上了ps6的plugin文件夹地址。可惜,fwmx没有任何的反应。 于是我按另外一种方法,直接将ps6里的plugin文件夹复制到了fwmx的相关目录里。停,我怎么找不到了?原来,fwmx的目录结构与以前有些不一样了,原来在fw4以及以前版本中滤镜是放在configuration/xtras目录下的(如下图) 而现在,xtras目录搬到了根目录下,并且如同ps一样,改成plug-ins的目录名。 好了,找到了滤镜的目录,ps6的滤镜也复制进去了,重新启动fwmx(和fw4一样,需要重新启动一次软件才能发现新的滤镜),这时filters菜单中已经发现了新的滤镜了。 随便作了个图形,然后加上一个滤镜,结果跳出来这么一个错误窗口。和fw4是多么的相象呀。 哎,看来使用ps6以上版本的滤镜确实没有希望了。fwmx在滤镜这一块上没有进步,仅仅只是多了一个默认第三方滤镜。
Fireworks MX之旅:GIF动画
制作gif动画一直都是fireworks的强项,方便、快捷、自由是fireworks的特点。虽然还有其他的一些优秀的动画制作工具,比如flash,比如imageready。但在制作gif动画上,我一直都推荐fireworks,而不会选择其他的软件,甚至不主张用flash来制作gif。 flash的主要作用还是在制作矢量的swf动画上,gif动画则是flash的一块鸡肋,发色数不多、文件体积巨大、文字不清晰都是flash制作gif的最大毛病。 至于其他的一些傻瓜式gif制作软件,我就不多说了,没用过,也不想去用。因为使用那些模板制造工具只会限制人的思维,而在制作一些动画logo中,创意一直都是很重要的一个因素。 fireworks的绝对自由正好给创意的发挥提供了一个最好的舞台;从flash引入的symbol符号概念,可以帮助我们轻松完成一些特效的制作;使用frame时间帧来控制动画的进程,和我们平时的习惯一致,这点不同于imageready的层概念。 言归正传。fireworks的gif动画制作其实在fw4时已经趋于完美了,不知道fwmx会有什么样的进步。 首先试试symbol。新建一个文件,再里面随便画了个不规则多边形,按键盘上的f8,定义成一个symbol(graphic)。 可以发现,弹出的对话框和fw4是一模一样的。将该symbol命名为graphic(这是为了和后面的几个symbol有所区别)。这时,library面板中已经出现了该符号。