PS与AI做多媒体网站首页创意布局设计(1)

王朝学院·作者佚名  2010-08-22
窄屏简体版  字體: 小  |  中  |  大  |  超大  

多媒体网站首页需要极富视觉吸引力的创意布局,今天,我们将演示如何用photoshop和Illustrator这两种软件的画笔、纹理和3D效果等工具,结合照片素材来设计一个有创意的多媒体网站首页布局。

完成效果如下。

具体设计与绘制过程如下。

在Photoshop中创建一个960 px * 620 px的画布。这个尺寸适用于大部分的网站屏幕。

按CMD + R添加标尺,画出一些指导线,标明主要内容区域的界限。 这将益于定位你的设计。

现在主要区域被适当的限定,调整画布为1224 px * 620 px(图像>画布大小)创建一个更大的背景。这个溢出的区域将有益于大屏幕,创建一个’无边界’的视觉效果。

在中心添加指导线。指导线将方便你定位中间的设计元素。一个快速找到该中心的方法是创建一个新层,然后按快捷键CMD + T激活“自由变换”。

现在在云彩背景平台上放置主要元素。先制作一个灰色的渐变背景。去图层>图层样式>渐变叠加。渐变颜色为#434344到#EAECEC。其他设置为默认。

创建一个新层“云”。载入云彩笔刷Clouds brushes,用白色涂抹出一些形状,大小和透明度各不相同的云,直到你得到类似下图的效果:

创建第二个图层“云2”,在中心添加一些云。

创建第三个图层“云3”。这一次使用抽象光晕笔刷Abstract glow brushes,使用第二个笔刷,大小为420px。翻转它,按CMD + T>水平翻转。这使云彩看起来更加虚无缥缈。

现在,我们将创建一个大的“M”。你也可以把你公司(或者你喜欢的)的首字母放在这里。

打开Illustrator,创建一个新层粘贴云作为背景。用它作为指导来设计3D的“M”。输入英文字母“M”:字体为Handel Gothic Ex,,大小181pt,白色,你可以使用其他厚宽的字体代替。为了让文本体现出三维效果,去效果>三维>拉伸与斜角。参考下图的设置。

复制3D的“M”,返回到Photoshop把它粘贴在文档里。重命名图层为“M”。现在我们将应用一些效果和纹理使之更加切合实际更有趣。首先对图层“M”应用下面的图层样式。

创建一个新文件夹为“m 纹理”。使用魔术棒工具选择字母“M”创建选区,并给文件夹添加一个图层蒙版。在这个文件夹里我们将放入所有的3D“M”的纹理。

从Rust Textures包里使用“纹理4.jpg”。复制,粘贴,并重命名图层为“纹理”。复制它,缩小副本图层“纹理2”到12.5%。

调整图层的不透明度为40%,并改变这两个纹理图层的混合模式为颜色加深。

使用Armored Metal Textures里的“metal_plaque_bump_seam.jpg”添加另一个纹理层“纹理3”。调整图层的不透明度为26%,改变其混合模式为强光。调整图层直到你得到满意的纹理。

使用不透明度约30%的柔软的圆形画笔在“M”的下方描绘阴影。使用涂抹工具调整,创建如下所示倾斜的影子。

添加公司名称,这里是“Multimedia”。使用Heritage Extra字体,大小32px,黑色。下一步将在它下方添加一个微弱的阴影。

复制图层,重新命名为“Multimedia的阴影”。按Cmd+ T使用变换工具,右击并选择垂直翻转。添加动感模糊。更改图层的不透明度为50%。添加一个图层蒙版,最后应用一个渐变来淡出底部。

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航