网页美工实例教程

Ⅰ 淘宝图片美工教程

淘宝图片美工方法如下：

1、首先打开软件，找一张要做的主图，去淘宝上随便找一张图片来做例子。

Ⅱ 网页美工设计方法

网页美工设计方法

美工分为平面美工、网页美工和三维美工。下面整理了一些网页美工设计方法，希望对大家有所帮助！

一、配色

其实对色彩的感觉是设计师应具备的最基本素质，其作品不管是对网页界面、系统界面、还是产品包装等等都有广泛应用。基本的一些理论，什么冷暖色、对比色/补色、色彩心理、搭配原则等等，满大街都是，有意者随便搜一两篇看看就行。色彩对于美工设计师来说，更重要的是一种感觉，就像打篮球投篮的手感一样，多看，多练，这种感觉是可以后天练出来的。Mars刚接触设计时，连坐公交车时也会注意路边某公司、饭店的招牌是如何配色，处处留意生活中色彩搭配的美，关于色彩截图就更记不清有多少张了。

设计师对颜色的运用一般有这么几个阶段：

初级阶段：用自己首映感觉最好的1~2种颜色，不考虑其他因素、他人感觉;

过度阶段：开始感觉一两种颜色单调，尽量多尝试不同色彩，该阶段极容易出现没目的的乱搭现象;

成熟阶段：该阶段了解了大众对色彩的审美，开始理性的用1~2种色系搭配，能体会到同种颜色不同色值的细微差别，大多设计师都在这个阶段;

终极阶段：把一种色彩用至极致，甚至只用黑白灰，完全沉浸某种颜色，甚至有点变态，但其创作效果让处于第三阶段的设计师一看就是大师所为。

其实这也是个不断练习积累的过程，这样色彩的感觉才会提升。

二、布局

美工设计师除了对色彩要有好的感觉外，对布局也要有很好的把握，组合的好坏直接影响作品的效果。

其实做好布局设计也不是很难，无非就以下几步：

布局准备：明确你表达内容的主体部分需要哪些必要的文字和图片。不要考虑太多细节。

布局版式：关于布局的版式多种多样，在将重点内容放在最显眼的前提下，可自由选择版式。对于网页来讲，根据大多数人从上到下、从左到右的浏览顺序来考虑，应该将最主要的内容、图片等放在页面的左边和上边。

精细布局：整体配色、字体、各模块的间距、插图、增减内容等各个方面的推敲。这一步是细活。

Mars觉得最锻炼布局的方法是制作PPT。想把PPT制作美观、精简并不是件容易的事。对于软件行业的售前来说，如何制作漂亮的PPT应该是他们自我内修的一门必修课。PPT的.布局做好了，其他网页、宣传册等平面布局应该都信手捏来。

三、细节

至理名言“细节决定成败”，在设计领域了这句话更显得重要。很多细节可能会被浏览者忽略，但对设计师来说绝不可放过，比如背景色、色彩渐变、各组件间间距、标题样式、高亮样式、字体/大小/颜色、行/段间距、插图位置/边缘处理、输入框宽高/边框色/背景色、按钮的位置等等太多了。还是之前的话，只有你看得多了，比较得多了，才能看得出这些细节。有人觉得这些细节没有什么大碍，但多个细节组合在一起就和让人觉得不舒服。

以上几方面都是关于个人审美观方面的提升，如果你不是打算进行美学研究，我觉得过多的纯理论学习不会对你的审美观有太多提高。所以我的建议就是：多看，多模仿，多做，多比。切忌自己没有什么审美观就盲目创作，其实模仿没什么可耻的，是学习的毕竟阶段。好比有人模仿 MJ跳舞，尽管不是很像，但最少会得到一小部分人的喜爱和追捧，比如在某校/班的圣诞晚会上;而如果不了解大众审美，就很可能像芙蓉姐姐跳舞，只会是笑料罢了。养成良好的审美观可以运用到生活的方方面面，而生活的方方面面也锻炼你的审美观，像摄影、布置自己的房间办公桌、服装的搭配等，能提高你的生活品味。

四、心态

在累计阶段，心态平和、踏实耐心，切忌急躁，美工本身就是细活，着急是没用的。有了基本的审美观，需要创作时心情放松，做些想做的事，吃点想吃的东西，随心所欲，给提供自己创作灵感环境。不要意味的坐在电脑前去想，事倍功半，会把自己郁闷死。

五、技能

有了良好的审美基础和创意，接下来就是制作了。相比较审美观的培养和创意的来临，Mars觉得一些工具技能是很好学得，无非就是我用铅笔、还是毛笔画的问题。大概介绍下Mars接触到的工具：

制图技能：Photoshop(平面处理等)、Illustrator/CorelDraw(矢量图)、Flash(动画)、Premiere Pro (影视后期)等等这些只是应用的工具;

页面编程技能：html、css、JavaScript等;

优化技能：压缩图片、网页优化等。

以上工具网上的教程一抓一大把，推荐网易教程。可以找些基础的看一下，一回生二回熟，平时多用即可掌握，更深的技巧可以日后用到再研究完善，要边用边学，这样记忆深刻。

六、用户体验

用户体验一般出现在网页设计和系统界面设计里，是用户和人机界面的交互过程，界面操作的易用性，直接影响了用户对该款产品的印象。用户体验是对美工更高的一个要求，甚至有点儿超越美工的范畴，但只有美工了解这些才能更合理地设计界面布局，整体搭配等等。

Ⅲ 网页美工是怎样进行图片切图的

步骤如下：
1.首先我们需要用到的文件就是psd的文件了，一般都是由设计师来完成的，我们切图也就是切psd文件，因为psd文件是分层的，所以想切哪里切哪里。
2.之后用Photoshop软件打开psd文件，这里小鱼用CC版本演示，其他版本大同小异。我们打开之后可以双击左侧的放大镜工具，将图片缩放到原图大小。
3.我们要切图，当然用到的就是“切片”工具了，可以点击左边的切片工具，也可以右击这个图标选择更多的相关工具。切图都是用切片工具。
4.选择好切片工具之后，想要切哪里就直接拖动鼠标就可以了，然后会出现切线，在切线框内右击还可以弹出菜单。
5.点击菜单的编辑切片选项还可以对切片进行编辑，可以编辑大小等项目。
6.但是如果我们只想要字怎么办，不要底层背景，那么可以用“移动”工具。选择移动工具，在不要的背景上单击，这时候在“图层”面板里面就会选中这个图层。注意勾选上面的“自动选择图层”。
7.把选中的不需要的背景前面的小眼睛去掉，最后只剩我们想要的部分。
8.然后点击左上角菜单栏的“文件”，选择“存储为web所用格式”选项。
9.如果要透明的，那么一般选择png格式，如果要非透明的，那么哪个格式存储的文件小就选择哪个，这样能保证网页加载速度快。然后点击下面的“存储”按钮。
10.然后给图片命名，选择一个保存地址，最后选择“选中的切片”，不然好多没用的图片都会保存下来。
11.最后找到保存好的图片打开，已经是一个我们想要的图片了。

Ⅳ 如何自学网页设计

1、在桌面上右键点击鼠标，出现对话框之后，点击新建。

Ⅳ 网页美工设计怎么做

网页美工设计怎么做

导语：随着淘宝的逐渐流行，网页美工设计的市场也是逐渐地宽广起来。如果你想要成为一名合格的网页美工设计，那么你就应该要从多方面地满足自己的要求。为自己负责，并且也应该要懂得去更好地进行淘宝网页的设计，让这样的网页设计出来的效果可以达到成为一幅值得欣赏的图画。而想要成为一名合格的网页美工设计，也是应该要知道自己所承担的职责的。那么 合格的网页美工设计 的职责是什么呢?

关于网页美工设计是负责整个网站的前台设计，界面设计、规划整个网页的布局。目前使用ps进行界面效果图的设计，AI辅助设计LOGO、以及网标。所以作为网页设计师掌握的重要工具就是photoshop软件。网页美工熟悉各种平面设计软件，如Photoshop、ai等软件，完成美术视觉上的设计排版等。

网页美工负责的图形设计，即传统意义上的“美工”。不过不是单纯意义上美术工人的工作，既然搭上了“网页”的头衔，因此他们负责的是软件产品的产品“外形”设计。交互设计主要在于设计软件的操作流程、树状结构、操作规范等。一个软件产品在编码之前需要做的就是交互设计，并且确立交互模型，交互规范。网页美工要负责这点，相信很多人都不知道，因为在大众的印象中，美工只要负责视觉效果就可以了，但仅仅是视觉设计，作为一名合格的`网页美工，那是远远不够的。

而第三个网页美工的职责：用户测试/研究，其目标是测试交互设计的合理性及图形设计的美观性，主要通过以目标用户问卷的形式衡量网页设计的合理性。另外，对于网页美工的职能，不少人还存在着一个误区，那就是认为网页美工精通CSS/HTML/JAVASCRIPT等语言来做网页布局，其实这是不正确的，网页布局的工作应该是由前端开发工程师来完成的。

在网页美工切图设计要注意以下几点：定要做好网页宽度的设置设计，一般网页宽度有760PX、900PX、1000PX等，最好不要超过1200PX的宽度，高度没有限制。大多数做网站的公司都有一个比较合理的标准。作为网页背景、网页图标的要清晰，在网站设计的时候比较注重。所以在切图的时候不要切出来的效果与设计的效果相差太大。有特效地方，有必要设计出特效样式，以便DIV CSS制作的时候切图使用。