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
投稿猜你喜欢
AI 处理干净精准的矢量图形可谓是得心应手、游刃有余，但有时我们不想要干净精准的风格。许多插图作品是粗略或手绘风格的。使用 AI 的实时描摹- 水彩画效果的制作方法有很多，基本上都是利用滤镜效果给照片
- 前几天彬Go和大家一起讨论了960 Grid System这个CSS网格系统框架的基本原理和使用方法。今天，暴风彬彬将教大家使用Photos
- 写在最开始的，来蓝色很久了，很少转国外的帖子，国外用样式调节字体的帖子基本上都是千篇一律，很少有代表性的文章。今天看到一篇不错的这篇文章，转
- 本教程介绍海景照片的一些调色方法。大致的调色过程，先用一些基础的调色工具把照片的色调调均匀，然后整体润色和增强饱和度即可。原图 最终效果&n
- 本教程的图形制作方法非常简单，只需要用钢笔工具勾出图形的
- 原图最终效果1：打开图片复制一层，因为照片偏黄。所以就先创建通道混合器调整图鞥。参数设置如图1-3，效果如图4：<图1><
- 本教程的效果有点另类。人物色调调得比较艳丽而且色彩对比度较大。不过放在合适的素材上，效果也别有一番风味。原图最终效果1、打开原图素材，把背景
- 全篇章分了两个小章节，即这次教程的重点：网格运用篇（五官篇），以及修补篇（还可称衣服装饰篇章）这次绘画制作我们要引入个新的工具——网格工具，
- 在这个教程,我将给大家演示如何制作简洁优雅的WordPress主题.虽然只是使用简单的技术,但我保证你能创建一个极好的WordPress主题
- 最终效果：1.新建一个600*150的文件，背景填充黑色。选择“圆角矩形工具”画一个同样填充黑色的圆角矩形，选择“添加图层样式—斜面浮雕—描
- 这回我们来制作的是晶莹剔透小字体，很可爱``很漂亮哦```先看看效果图。 首先我们用钢笔勾出想要设计的内容，这里我们要注意的是曲
- 最终效果图预览：第一步：建立一个新的文档，大小为1000像素乘以500像素，分辨率为300pix/inche，并且命名为"Home
- 教程主要以是3D效果机器人为主题,将平凡的美女图片打造成为末来先进科技产品的机器人,主要工具利用表面模糊、减淡工具、加深工具、笔刷等应用工具
- 能否坚持等比例缩放，一直是评价设计师是否严谨的重要标准，起码我个人是这样认为的。单方向的自由变换总是对照片造成生硬的拉伸或压缩，特别对人物照
- 先上素材 1.打开素材图片，并打开通道面板把绿色通道复制一份，在复制的绿色通道里做如图1的选区（除纱以外的地方都选中）2.把选区填充白色，
- 本教程介绍一些夸张人物表情制作方法。制作的时候需要重点突出人物的眼睛及嘴巴，当然其它部位也可以，然后把需要突出的部位复制出来进行强行放大，然
- 注：本人修改了教程中部分的步骤，某些操作采用了自认为更简便或效果更好的操作，如果有不懂的或者有所指正，欢迎留言~谢谢大家！最终效果图预览：第
- 前言：在PS鼠绘人物当中，嘴巴的绘制也往往是初学者较为头痛的一部分，如何把握嘴巴的形状及色块，如何体现嘴巴的立体感，下面我们将为大家讲解鼠绘
- 本教程的色调比较特别。作者调色的时候特意把图片调成一种反白的效果，有点朦胧的感觉。调色的过程也比较简单，先是用调色工具调整体的颜色，人物部分
