准备用于Web的插图
2008年6月16日由chriscoyier · 3评论 
插图是一个可爱的网页设计的趋势。 它符合中期好。 虽然大插画，往往不认为在网络上，当他们自己的插图。 在这一非常好的天空一看/山市容说明我ShutterStock的发现：
我认为这说明会，让您的网站设计一个伟大的基础，但显然不是这样的现成的工作进行准备。 可以让做一些操作和准备它的网站。
进入Photoshop的
这是令人兴奋的是矢量的插图。 这意味着我们可以使任何规模的，我们需要没有任何质量损失。 我们的目标是使这一幕坐在了浏览器的顶部中心，所以让我们在它的最高到Photoshop与我们的网页主要内容区。 说，960px。 创建一个新的Photoshop文档960px宽，长得比它需要适应。
打开您在Adobe Illustrator和选择所有的例证。 复制并粘贴到您的Photoshop文档。 请务必将其粘贴为智能对象。 这将让它保持它的矢量性，使您的高档质量，而不会失去它。 它可能会接任太小。 有没有担心，只是它的规模以适应你的960px范围内的文档。
扩展边缘
浏览器窗口不固定宽度如Photoshop文件的环境中。 我们需要做好准备，我们的例证，好看浏览器窗口时，比我们的基地960px宽。 让我们继续并增加我们的文件画布的宽度为1280px，使我们有工作空间。
我们的目标是，争取在这方面的事情将要结束横向重复说明的边缘。 切片的人了这个文件，将需要这样的事情，使这个网页的设计工作。 最终这片将是该网页<body>元素的背景，我们的主要例证，就坐在上面。
我要一本图的右边缘的小条子和“浮动”它把它自己的新的层（命令- J）的。
现在，我们可以自由变换这个新小片（命令- T）和扩充过的文件是双方水平。 由于创造了不错的梯度和垂直，这个扩建工程很好地关闭右侧。 虽然在右边，看起来太突然了山上，布什和道路，突然被切断。
模糊过渡
做任何事情，而不是太花哨，尽量合并这两个层一起，让我们通过放置一个模糊的前景是苛刻的过渡物体在顶部直接。 这说明可以做一个深入一点额外的反正。
这向量信箱就很好。
除删除所有邮箱本身并粘贴到作为一个智能对象说明它就像我们把原来的例证。 一个小大小和位置，我们为背景的模糊过渡的完美元素。
主要内容区
我们的说明会为一个可爱的头和背景，但对网站的实际内容，我们需要一些大块的白色一种。 能让下降了一个阴影位上白色圆角矩形有权确定其关闭。
填写底
随着水平的边缘模糊不清现在很好，我们可以填写关于网站的实体模型的底部其余颜色。 样品从最底层的方式插图像素的颜色（与滴管工具），然后填写我们的底部这个新的色彩最空层。
这主要内容的地方，现在将是一个体面的任何网页设计师风，冲出了。
最后的修饰
抛出一个可爱的小欢迎消息在天空，我们有自己一个好看的说明网页样机。 因为我们采取了深思熟虑的横向扩展和纵向扩展照顾，这说明现在是最适合转化为真正的网页的标记。
为什么这次在所有任务使用Photoshop？
为什么不使用Photoshop？ Photoshop是一个为Web图像，像这样的形象，而是布局（教程想法）很好的载体不是好工具。
感谢您的提示！ Photoshop是魔术！