威龙发艺发型设计价格联盟

入门篇】平面设计师如何转战网页设计

插画艺术设计创意手工手绘包包袋2021-09-11 16:44:46

这一期的教程,送给毕业刚进入职场的大学生以及从事平面设计想要做网页的朋友。

我们的主题是平面设计转战网页设计,之所以转就是因为平面这几年越来越难混了,当然抛出一些资深的平面设计师。“要想发做印刷”,这是前几年的响亮口号,印刷行业迅猛发展,商场或企业一般会做出很多的印刷宣传产品,那时候平面设计需求非常大,市场缺口也多。结果,盖茨、乔布斯轮给印刷厂一巴掌,人们的生活方式瞬息改变了,获取信息不再靠印刷索取了,多数通过电脑浏览网页或手机搜索,导致印刷行业逐渐没落,因此平面设计需求也少了、待遇也低了很多。

很多的优秀平面设计师看到迅猛发展的网页设计,从而转行做网页,但是再资深的平面设计转到网页上来都会遇到很多问题,我们这节课就针对遇到的问题进行解决,希望能够帮助到转战网页的平面师,如果喜欢的话就请持续关注火星人教育哦!

第一要点——尺寸/分辨率/颜色模式

有些东西我们确实想越大越好(邪恶的画面感)......

我们网页设计就不一样了,大了反而不好,遵循一个合适原则,那么我们就通过平面设计与网页设计的对比印证我的说法。

第一张是平面设计,经常面对的带有出血的宣传单尺寸,这个尺寸我面对了两年多,第二张是去除滚动条宽度后制作网页常用的尺寸(为什么会是这个尺寸后面我会解释),这个是我现在每天面对的。

对比不难发现有3点重要的不同:

1.单位由厘米变为了像素

什么是像素,要想了解自己去百度百科,我们这里不上理论课,我这里就做这一个通俗的解释。

相信大家都见过下图这货,覆盖在各条街道,一不小心瞅一眼直接亮瞎我们双眼的LED显示屏。整个大屏幕是由很小的小灯泡通过区域显示,才组成我们可识别的文字,而我们所见到的电脑屏幕显示器也是有若干小灯组成的,无非在电脑屏幕上我们不叫小灯泡,人家高大上的称之为“像素”。

LED屏幕上的灯的数量用个数表示,宣传单宽高用厘米(cm)表示,那么以上所得我们屏幕显示器最小单位是它了“像素(px)”,用像素这个单位来表示在屏幕中我们作品真是的宽高。

从此转战网页的平面设计师,你世界里的单位不再是厘米而是像素了。

2.分辨率由原来的300dpi改为现在的72dpi

大家应该都明白在同样宽度下LED灯的数量越多,显示的文字就越细致。我们屏幕也是一样的,是指单位长度内包含的像素点的数量我们ps上图的意思就是一英寸显示72个像素。

72像素不是我们自己定义的,而是屏幕显示器的解析度约为72,以一部15寸的电脑显示器为例,可视面积的水平长度大约为11.2寸,如果显示模式是800*600,那么解析度就是800/11.2=71.4。

所以说,屏幕解析程度限制着我们就是72,如果你再给大的数值,那么他还是以自己解析程度进行解析的。

在学习那会,做一张海报作业,老师说了分辨率越高,图像越清晰,一张一米多高的海报,分辨率我硬是给了450像素,作图那种卡,我真佩服当年还能做下去,最后艰难的做完了,把文件拷到打印店,大概一个小时才打开,师傅一看我的分辨率,看我的眼神都变了,我的天,难道我做的图不好看吗,在鄙视我么?

所以说,分辨率越大越好的说法是不对的,我们只有说找到合适我们的才是关键!

3.颜色模式将CMYK改为RGB

做宣传单是通过电脑制作成稿,然后转交印刷厂,通过四色印刷机生产最终成稿件,做平面最大问题就是偏色,电脑显示的颜色非常亮丽可能出稿就变得发乌或其他,原因就在于,我们屏幕渲染的图像是RGB的减色模式,而印刷厂是通过四色加色生成印刷稿件,亚瑟模式的转变,必定会导致颜色的偏差。


做网页就不同了,我们做出来的作品不是打印出来的,而是消费者从电脑上看,也就是从电脑到电脑,不存在颜色模式的转换,偏色幅度就小了;当然也是有偏差的,因为屏幕显示器生产厂家不同,颜色标准也不同,所以会偏色。

在淘宝中,消费者经常抱怨,买来的衣服和淘宝描述的衣服色差很大。

这里要提醒大家,不是转到网页上RGB就没有色差了,色差是有的,但是是可以处理的,我们做完网页,上传到服务器,多观察几个不同显示器,多测试几次,即可减少色差,避免带来后期与消费者产生争执。

第一点总结:

将单位改为像素(px)、分辨率改为72dpi、颜色模式改为RGB。

其实平面转网页最大的好处就是,你的电脑再落后做网页都不卡,因为网页文件都很小,一个8G优盘+1T云盘,无论是素材还是作品就都装下了。所以别为自己的转行找借口换高配机,没太大必要。

第二要点——流程控制与设计元素

刚刚转行网页的平面设计师,经常会做出一些让网页前端代码人员抓狂的作品。

因为不了解网页中组成元素以及制作流程,还是按照原来平面设计的路子走,那会给后期人员造成很大麻烦的。

1.设计流程的更换

在做平面设计的时候,做完的ps效果图,经客户确认无误后,直接可以递交印刷厂出稿了,但是网页就不同了,你做好的PS效果图,客户确认了这只是流程的开始。

正确流程是:PS效果图—>大图切片为独立小图—>将小图通过HTML编辑还原大图效果—>JS实现动画效果—>PHP程序搭建后台。

以上就是一个网站生成的基本步骤,淘宝征战略微简单点,你会想后面这些东西和我网页美工有什么关系,关系非常大,做了网页美工之后你就不是一个人在战斗了,你的工作要配合整个团队。

本来一个不到两千的网站单子来到你手上,你按照平面的方式做的天马行空,创意十足,开心的交给了HTML代码人员,人家代码人员一听是不到两千的单子,按照常理半小时就搞定了,打电话约了女神吃饭,结果拿过你的稿子一看直接跪哭,违约了女神而且还无意义的加了班,好不容易做完了交给JS交互师,交互师完成了这么多年来第一次的压力活,还以为是个上完的单子,最后给了程序员把整个网站都完成了,最终网站上线,客户看到的效果和开始签单的效果差距很大,客户拒绝交全款,最终你们这个加过班的团队不但没有拿到奖金,而且受到了处罚,如果眼神能杀人的话,相信你已经死了很多次了。

造成这种结果,想要融合团队,你需要了解哪些元素需要在两千元以下单子出现,那些是在一万左右的单子中出现的,这个很关键。

2.网页设计元素

如今将效果图切割为小图后,通过HTML网页排版,这种常用的网页排版技术是DIV+CSS技术,俗称豆腐块布局方式,如果你的效果图做的方方正正,没有圆形、多边形或者异形、童颖、半透明等,网页排版是非常快的,通常熟练的HTML码工,一小时左右就将效果图生成为网页了,这种适合与两千一下的单子当然有的客户要简约的也有这种布局的。

这里不评价哪个网页的好坏,你一眼也应该能猜出的哪个价值更高。

第一张标准的豆腐块布局,没有任何异形,网页排版的工作强度非常低,而第二张看似简单,但是应用了图片的不透明度,圆形图形等的布局,工作难度系数也略高一些,通过这里的讲解你应该大体知道什么样的元素适合于低价的网页,哪样的元素应该出现在高价网页中。

第二点总结:

做网页设计不和平面设计一样,你做的效果图让客户看了,网站最终上线后客户就会拿你的效果图和最终成品做比较,如果你做的效果图难度系数比较高,但是价格都跟得上,那么你的团队会积极响应完成你的设计稿,假设价格较低,那么团队的积极性上就上不去,并且没必要花那么多的时间浪费在这个小项目上。

因此你在做效果图的时候,首先应该考虑到这个单子的价格,价格合理再放宽思维进行设计创意,价格不够就是豆腐块布局。

第三要点——图片储存的各种格式

平面设计做完后,必定储存的格式就是JPG或者TIF,但是网页设计中经常使用的格式是JPG、gif、PNG,对于这三种格式区别一无所知,那就赶紧学习吧!

将一张图存储成三种格式


gif格式:支持部分透明,柔和的边缘会统一用一种颜色概况,因此不能完全显示完整透明效果。突出特点:支持多图像文件和动画文件,多用于做动态交互图片。


PNG格式:完全支持透明,属于索引颜色图像清晰度不够,提高清晰度将增加文件大小。PNG格式最突出的特点:一般网页中出现的圆形或异形,都是通过将图片存储为PNG格式来实现的。


JPG格式:不支持透明,将透明区域默认的补充为白色,因此半透明的图像一定不要考虑这种格式。最突出的特点:属于压缩格式,图片文件比较小,色彩丰富,一般用于存储高清海报或照片等。


第三点总结:面对图片格式该作何选择

如果做一张动态图片,那么肯定是gif,在众多格式中,唯独他是可以做动画的。选择JPG或PNG主要依据图像上的色彩层次和颜色数量进行选择。一半层次丰富颜色较多的图像采用JPG存储,而颜色简单对比强烈则应该用PNG格式进行存储。

如广告banner、商品图片等颜色丰富的图像应该尽量使用JPG格式存储。


友情链接