网页美工切图设计要点.docx

1、网页美工切图设计要点网页美工切图设计要点篇一：网页美工设计说明书网页美工与广告设计题目：姓名：学号：班级：指导教师：完成日期：设计说明书歪歪蛋创意生活网站美工的设计与实现王丹2022118012410图文孙俊国2022年6月18日课程性质：专业课一、考核目的考核学生网页美工与广告设计的综合能力。二、考核方式、内容、要求考核方式：以课程设计做为主要的考核方式。考核项目：自定一个网站主题。根据该网站，用Fireworks与Dreamveawer设计制作成xxx网站的主页与副页及其他页面。要求：1.要有网页美工的规划与设计。2.设计出网页主页与副页效果图，并根据效果图制作网站中的其他页面，并自己设计

2、LOGO、flash广告、栏目、导航、banner、网页内容；界面设计要美观，色彩搭配合理，有新意，超链接正确；网页中要有1个以上的Flash动画3.提交：index.pngfuye.png及网站（5张网页以上）；网页美工设计说明书。三、说明与评分标准执笔人：审核人：院长：2022-5-5一、概述.11.1选择缘由.11.2网页美工的定义.11.3网页美工的作用.21.4Firework.21.5色彩的平衡与呼应.3二、网页美工的总体.32.1网页设计的制作流程.32.2网站色彩布局.42.3网站结构.62.4图片轮显的制作过程.62.5滚动图片的制作.72.6制作网页的主要内容.72.7形成

3、网页.7三、美工设计总结.8歪歪蛋创意生活网站美工的设计与实现一、概述1.1选择缘由我用网页美工设计的网站是生活家居类的网站。随着今年来家居业“重装饰、轻装饰”的潮流，家居设计从越来越有实用性的作用提升到装饰性的作用，家居行业被前所未有的“激活”了家居产业发展前景光明。首先，以居民住房、宾馆饭店、旅游交通、医疗卫生等为代表的投资型和公共服务型消费热点，都将成为促进中国家居市场不断扩大的因素，随着社会的不断发展、人们生活的不断提高，人们对生活居住的要求不仅仅是为了挡风遮雨了，还加上了时尚、好看，这意味着人们对家居设计的商品越来越关注了，当前中国每年有1000万对新人结婚，因结婚产生的家居设计的消

4、费额将十分可观。各类的家居设计都与我们的生活息息相关，是生活中不可或缺的一部分,广阔的市场,巨大的消费群体对家居行业来说无一不是一个很好的良机。因此我选择了做家居设计方面的网站.1.2网页美工的定义网页美工就是对网页的美化，网页美工要熟悉photoshopfireworksflash等制图软件，也要有一个非常好的视觉功底，创意能力，才能创造出非常美观的页面基础美术：素描（石膏几何体、静物写生）；色彩（色彩构成、简单色彩静物写生）三大构成：色彩构成、平面构成、立体构成。Photoshop网页配色及排版设计；Illustrator网页设计；网页设计综合、经典网页解析。1.3网页美工的作用对于制作一

5、个网页来说。网页美工起着举足轻重的作用，网页美工设计不单纯从事美术绘画，而需要定位软件使用者、使用环境、使用方式并且最终为软件用户服务，他们进行的是集科学性与艺术性于一身的设计，他们需要完成的，简单说来，正是一个不断为用户设计视觉效果使之满意的过程。网页美工设计的职能大体包括三方面：一是图形设计，即传统意义上的“美工”。当然，实际上他们承担得不是单纯意义上美术工人的工作，而是软件产品的产品“外形”设计。二是交互设计，主要在于设计软件的操作流程、树状结构、操作规范等。一个软件产品在编码之前需要做的就是交互设计，并且确立交互模型，交互规范。三是用户测试/研究，这里所谓的“测试”，其目标恰在于测试交

6、互设计的合理性及图形设计的美观性，主要通过以目标用户问卷的形式衡量网页设计的合理性。1.4Firework在软件界，Fireworks指网页三剑客之一的软件。原为Macromedia公司所有。在Macromedia被Adobe兼并之后，Adobe又进一步发展了此软件，但是与Macromedia的风格差别较大。将来有可能被Photoshop等取代。现最新版本AdobeFireworksCS5.1。fireworks是一个强大的网页图形设计工具，你可以使用它创建和编辑位图、矢量图形，还可以非常轻松的做出各种网页设计中常见的效果，比如翻转图象，下拉菜单等，设计完成以后，如果你要在网页设计中使用，你可

7、以将它输出为html文件，还能输出为可以在photoshop,illustrator和flash等软件中编辑的格式。Fireworks提供专业网络图形设计和制作方案，通过它，你可以编辑网络图形和动画，支持位图和矢量图。同时它能dreamweaver、flash能实现网页的无缝连接，与其它图形程序各HTML编辑也能密切配合，为用户一体化的网络设计方案提供支持.篇二：ps网站切图网页切图教程详解Ps网站切图详解一，基本概念1，切图，是一种网页制作技术，他是将美工效果图转换为页面效果图的重要技术。Fireworks也提供了切图技术，Flash则直接提供了网页格式输出技术（不需要切图）。2，切片，是切

8、图的直接结果，切图实际上就将图切分为一系列的切片二，切图操作过程1，切图工具图标的识别2，切图基本操作1）基本操作有两个：划分切片和编辑切片划分切片，是使用切片工具，在原图上进行切分的操作。编辑切片，是对切分好的切片进行编辑的操作，编辑包括对切片的名称、尺寸等的修改等等下面我们看一下这两个操作2）基本操作如果想移动某个切片，可以使用“切片选择工具”选择某个切片，并用鼠标进行拖动，也可以使用实现，另外如果想精确的细微移动，则可以使用实现如果想将某个切片存为某个图片输出，可以使用“切片选择工具”选择某个切片，然后选择“文件”菜单，并选择“存储为Web所用格式(W).”，然后在弹出的界面中.3，切图

9、技巧1）一张图，可以有多种切分方式，如下：既然存在n多种切图方式，那么是不是哪种方式都可以满足要求？：不是的。一般对页面的要求是，当页面大小发生变化时，页面的各部分可以相对自由地伸缩，而不会使页面发生错乱或变形等问题。我们切分好的图是要输出为Html格式的网页文件的，然后通过网页编辑器，将该页面进行加工，做成符合要求（例如可以根据内容多少，自由伸缩等）的模板页面。这其中，切图的方式直接影响着模板页面是否能够满足实际的要求。我们来看一个例子：2）切图技巧主要有几下几点属性均匀的区域适合分为一个切片，均匀主要是指颜色和形状都没有变化，或者在X或在Y方向上没有变化。属性渐变的区域适合分为一个切片，渐

10、变有两种表现形式颜色渐变形状渐变根据原图的内容布局，确定整体的切分策略，即切分要有分块的思想，要在想象中将整个布局看成是一个两个table，然后在具体到每个table，去考虑里面应该如何切。下面通过几个图例来说明三，切图的Html格式输出切图完成，就可以输出为Html格式的页面了。在“文件”菜单中，选择“存储为Web所用格式(W).”，在弹出的页面中直接选择“存储”，然后在弹出的界面中，填入文件名，保存类型选择“HTML和图像(*.html)”，设置为“默认设置”即可，切片选择“所有切片”。然后点击“保存”按钮就可以了。后面的事情，就是编辑输出的Html页面了。网页制作：从切图到生成网页鉴于很

11、多朋友问到如何切图这个问题，又鉴于这个问题可大可小，一两句话是绝对讲不清楚的，所以今天有空闲在家里就举一个简单的例子来说明这个问题吧!OK，让我们开始：step1:在PhotoShop中打开设计稿，如下图选择工具板上的slice切片工具，先大刀阔斧的切上一番!技巧：大面积的色块单独切成一块，尽可能的保持在水平线上的整齐(这个问题你们在后面的制作页面中深有感触)切好的图如下所示：篇三：网页美工设计-实验江苏经贸职业技术学院实验报告(2022/2022学年第一学期)系部信息技术系课程名称网页美工设计学生姓名学号班级指导教师二00六年二月制三、实验步骤:1.打开PHOTOSHOPCS3软件新建图层（

12、名称为“茶壶”，宽为400毫米，高位300毫米，分辨率为300像素/英寸，颜色模式RGB，8位，背景颜色默认为白色）用渐变工具设置左色标RGB值为161、152、131，右色标RGB值为255、255、255确定鼠标从左上角一直拉到右下角完成2.打开“小镇”图片用移动工具移到“茶壶”图层调整图片大小，移到适合的位置将“小镇”图层的不透明度改为30%完成3.新建图层用矩形选框工具在“茶壶”图层画出矩形框，填充背景色RGB值为181、176、163C，TRL+D利用移动工具，将矩形框下移，CTRL+SHIFT+ALT+T进行复制。新建组，将条纹图层放入图层组中，命名为“条纹”4.打开“梅花”图片用

13、移动工具移到“茶壶”图层调整图片大小，移到适合的位置，并将图层命名为“梅花”5.打开“茶壶”图片用移动工具移到“茶壶”图层调整图片大小，移到适合的位置，并将图层命名为“茶壶”6.打开“案几”图片用移动工具移到“茶壶”图层调整图片大小，移到适合的位置，并将图层命名为“案几”7.打开“茶杯”图片用移动工具移到“茶壶”图层（移动四次，即出现四个茶杯）调整图片大小，移到适合的位置，并将图层命名为“茶杯”8.按“CTRL+”，合并“茶壶”、“案几”和“茶杯”图层，命名为“茶壶组合”9.打开“竹子”图片用移动工具移到“茶壶”图层调整图片大小，移到适合的位置，并将图层命名为“竹子”10.选择“直排文字工具”，输入“宜兴紫砂壶”字样，字体为华文行楷，字体大小为点，锐利，字体颜色RGB值为181、176、163右击图层栅格化图层11.完成并保存作业四、实验中遇到的问题及解决方法：无2