这篇文章最初发表于2009年。
介绍的技巧和技术可能过时。

我最近有幸为《网络杂志》网站建设系列设计了一个有趣的网站。挑战的主题是儿童玩具网站,因此,它自然包含了各种明亮多彩的元素。让我们来看看创建有趣的插图景观场景的过程,我用于我的设计。

网络杂志193

《网络杂志》193版

完整的扩建挑战见第193期网络杂志,一定要去看看!

在Photoshop中创建儿童图片网站beplay足球

挑战的目标是开发一个网站,将儿童玩具推广到适当的目标受众年龄,同时考虑最佳实践和道德规范。我的设计以一系列明亮的插图元素为特色,创造了一个假想的场景,让人迷路。

在Photoshop中创建儿童图片网站beplay足球

首先打开Photoshop并创建新文档。beplay足球为了清楚地显示宽屏显示器上的设计外观,我用了一张大约1680×1050的大帆布。用天蓝色填充背景,并添加辅助线以模拟中心的960px安全宽度。

在Photoshop中创建儿童图片网站beplay足球

选择一个较深的蓝色底纹,并在画布上半部分垂直绘制一个线性渐变。

在Photoshop中创建儿童图片网站beplay足球

在底部,在画布的宽度上绘制一个选择,并用深海蓝填充。

在Photoshop中创建儿童图片网站beplay足球

双击图层以编辑图层样式。添加从深海蓝到浅天蓝的渐变。

在Photoshop中创建儿童图片网站beplay足球

用钢笔工具画出几个流动的山丘,用草绿色填充形状。把这些山丘安置在海床的后面,这样它们就可以像两个岛屿一样从海洋中探出。

在Photoshop中创建儿童图片网站beplay足球

使用重叠的圆绘制一些蓬松的云形状。将它们全部填充为白色,并稍微降低不透明度。

在Photoshop中创建儿童图片网站beplay足球

添加一个大的斜面和浮雕效果,使用蓝色作为阴影颜色,给云彩一个三维的外观。

在Photoshop中创建儿童图片网站beplay足球

用大而柔和的白色外发光来结束云层。

在Photoshop中创建儿童图片网站beplay足球

复制云并将它们重新定位到天空中的几个位置。

在Photoshop中创建儿童图片网站beplay足球

为网站创建一个简单的徽标。这个网站上有一系列的怪物角色,我选择了随机命名的“Chumbooga怪兽”。将字体设置为创造性字体,或者从头开始创建手绘徽标。

在Photoshop中创建儿童图片网站beplay足球

添加斜面和浮雕效果以增加文本的深度,还有一个细微的阴影,把它从屏幕上移开。

在Photoshop中创建儿童图片网站beplay足球

设计的主要焦点之一是大视频区域。在设计的右侧放置一个大的云,然后使用创建视频快照可爱的毛茸茸的怪物从A上岗.

在Photoshop中创建儿童图片网站beplay足球

放置一些文本,呼吁采取行动以引起对视频的注意,我用的是友好的圆形四舍五入链接到儿童主题。

在Photoshop中创建儿童图片网站beplay足球

使用各种图层样式启动文本,比如白色填充物,蓝色轮廓和柔和的阴影。

在Photoshop中创建儿童图片网站beplay足球

这个设计还利用了隐藏在角落里的一点提示。要创建这个,画一个白色的矩形,然后旋转到一边。

在Photoshop中创建儿童图片网站beplay足球

使用“变换”工具中的“扭曲”选项来扭曲通知的形状,稍微向上弯曲拐角。

在Photoshop中创建儿童图片网站beplay足球

画一条薄薄的胶带,用橘黄色填充。去掉两边的锯齿状边缘,使其看起来像是撕裂的。本通知旨在为家长提供信息,因此,将字体设置为更严肃的大写无衬线字体,以与主设计中友好的圆形字体形成对比。

在Photoshop中创建儿童图片网站beplay足球

利用左边的剩余空间,对Chumbooga怪物玩具作一个介绍性的句子。网站针对儿童,很多视觉兴趣是很重要的,因此,我们可以牺牲Web标准字体为样式化的photoshop文本使用字体和我们喜欢的所有效果。beplay足球

在Photoshop中创建儿童图片网站beplay足球

页面上明确的行动要求将指导用户实现网站的目标。显示可点击区域,使用圆角矩形工具创建一个大按钮图形。添加一系列图层样式,如渐变叠加,一个笔触和柔和的阴影,以风格化的按钮成为诱人的东西。

在Photoshop中创建儿童图片网站beplay足球

用一个简单的命令完成按钮,比如收养一个怪物!这个想法是采用一个怪物,而不是购买玩具,使交易更可取。

在Photoshop中创建儿童图片网站beplay足球

正在促销的玩具也应清楚地展示在页面上。使用来自的图形上一篇文章创建纸条布局。可以一目了然地看到整个队列,让您快速挑选您的最爱!

在Photoshop中创建儿童图片网站beplay足球

设计差不多完成了。它使用生动的图形来吸引用户,并被剥离回少数重要元素,以避免失去兴趣。关注底层网格也有助于对齐元素以提供结构化外观,但作为一个针对儿童的网站,一系列活泼的角度有助于增加设计的兴奋。

在Photoshop中创建儿童图片网站beplay足球

最后的设计运用了一个蓝色天空和青草岛屿的想象世界,创造了一个心情愉快的完美场景。明亮的颜色有助于刺激大脑,信息被剥离,以避免压倒用户。一些行动要求为用户提供了下一步行动。在观看视频并被介绍给怪物之后,一个大而粗的按钮允许用户采用自己的怪物。

在Pinterest上共享
没有图像。
45评论 提交 加上你的!
订阅接收spoon图形通讯beplay全方位手机移动娱乐平台

订阅我的时事通讯,成为第一个听到新文章的人

45评论

  1. 我们位于德里的网页设计公司是一个一站式解决方案,为不同的网站设计服务。它提供各种各样的最佳网站设计服务,从吸引人的面向用户的网站设计到完整的电子商务网站开发包。在过去的5年里,自成立以来,我们已经创建并实施了成功的网站设计。

  2. 我对创建网站比较陌生。然而,我是自学成才的,我还不知道在你制作一个好看的PSD文件之后该去哪里,就像我们在本教程中找到的。有人能把我引向正确的方向吗?既然我可以创建一个好看的PSD,我应该学习什么?我需要知道如何编码吗?我需要知道CSS吗?我下一步该做什么(或两个……或三个)。

    事先谢谢。

  3. 精彩的教程克里斯,你的东西总是很棒的!

    鼓舞人心的帖子8!

  4. 很好的教程,很清楚。
    你使用了一些非常好的技巧,比如真实的磁带和云,我肯定会用这些方法。我想在闪光灯下看到它,有些动作会更甜美——大爱!

评论现已关闭