Photoshop把PSD网站模板切图为XHTML+CSS的网页
来源：asp之家 发布时间：2010-04-05 21:46:00
标签：切图,photoshop,PSD,模板,xhtml,css
之前我们用photoshop设计过一个blog网页界面---用PS设计清爽博客网站界面，这次将会将会用photoshop将网页设计稿制作成HTML页面.
现在我们来看看如何将这个概念设计转化为完整的由XHTML和CSS组成的标准网页。从PS里面将之前的设计稿从PS里面输出然后再加上编码，这样我们就会得到一个完整的博客设计。
在上一个教程里面，我们创建了一个包含了所有框架，设计，色彩，拟议定的板式和基本内容的设计模型。 现在是时候让我们回顾一下之前的计划和概念设定来看看——哪些需要使用纯粹的xhtml和css，哪些需要使用到原来的图片。
首先被导出的元素是大的背景图。隐藏掉其他所有页面的图层，然后选择大的背景图导出为web使用格式。
从第一印象上来讲，这个大图片很容易让人觉得他很大，所以体积会变的很大。但是事实上用jpg格式调整好质量质量之后这个文件仅仅才30K而已，这里需要你来拿捏文件的质量和整体的体积的平衡。（译者注：图片如果太大可以适当用高斯模糊来减少细节这样图片体积就会缩小点，一般来讲背景图不必使用特别清晰的底图，增加体积却又吸引眼球影响阅读。）
0
投稿猜你喜欢
本教程介绍立体图标的制作方法。基本思路先把需要立体化的图形简单透视化，然后把立体的几个面做出来，最后就是调整反光及各面的色彩层次。最终效果- 本文中我们用Illustrator来绘制一个大名鼎鼎的可爱卡通形象——绿豆蛙。
- 先看一下最终效果：开始制作：新建图层，画出苹果的形状，不用太圆，苹果本来就是不规则的。设置图层样式里的渐变，如图画完效果如下ctrl+j复制
- 在这个教程,我将给大家演示如何制作简洁优雅的WordPress主题.虽然只是使用简单的技术,但我保证你能创建一个极好的WordPress主题
- 最终效果：在本教程中，大家将学习如何使用Photoshop在短短几分钟内再现著名的Aqua墙纸。这其实很简单的！（其实就是个字体教程）pho
- 在我们做图的时候，颜色的控制很重要，最好是能够构思好用什么颜色来搭配，这样就不会乱费太多时间。本教程出发点也是这样，我把颜色定义在淡紫色和深
- 最终效果1、打架子，其实原图的线条没有这么酣畅，我先用了很多凌乱的小线条构筑比例。在最初明暗底稿描出大概稿，然后新建一层，随便填个色，在这层
- 最终效果图预览：第一步：建立一个新的文档，大小为1000像素乘以500像素，分辨率为300pix/inche，并且命名为"Home
- Photoshop CS5中的"色调"技法在对人物照片进行后期处理时，首先需要定位出预期制作的风格，比如怀旧
- 在人物绘画中，耳朵部分可能不是重点，不过也不能忽略。我们需要很好的了解它的结构和一些基础的鼠绘方法。这样我们才能画出完美的人像。最终效果
- 本教程介绍单一色调图片调色方法。调色的方法比较简单，先给人物磨皮及美白一下，然后就可以用调色工具调成自己喜欢的单色调。原图最终效果1、打开原
- 本教程介绍简单的水晶效果的制作方法。简单的利用一些滤镜效果，制作出类似水晶效果的纹理，然后整体调好明暗度，再配上高光即可。最终效果1、新建一
- 本教程主要是利用一些滤镜效果来制作底纹效果，然后通过图层叠加等应用到图层上用来做背景。再稍微调整下人物即可。原图最终效果1、打开原图，创建曲
- 原图：最终效果1、打开原图，复制一层，用图章工具去掉脸上的点点和疙瘩，图章不透明度30％左右，（我的32％）。2、再复制一层，把图层的混合模
- 本教程仅提供一种思路只为抛砖引玉大家如果有更好的方法也拿出来共享，下面先看效果 第一步：用螺旋形工具画出一个螺旋 第二步：根据情况从中心
- 原图最终效果1、打开原图解锁。2、按Ctrl + J把背景图层复制一层，执行菜单：滤镜 > 模糊 > 表面模糊，数值为默认，确定
- 原图效果图1、打开原图，转到LAB模式(图像—模式—LAB颜色)，建曲线调整层，对A通道调节如下：2、Ctrl+Shift+Alt+E盖印图
- 最终效果下面开始制作：1、打开Photoshop软件，我们这里使用的是CS版本。其他版本一样啦~~~打开准备好的素材图片，并将这个图片复制三
- 先看最终效果说在前面。这篇教程的英文原版有71步。这个实在有点长。而且前19步还是在AI中制作的。考虑到淋漓本人和大家的耐心。淋漓翻译的时候
- 本教程主要介绍人物的基础美白和磨皮。磨皮思路：把杂点教多的皮肤部分先用钢笔勾出然后模糊，勾图的时候有轮廓的地方不要勾，以免影响人物的质感。大
