详解网页设计师新手入行必备基本功

2015-01-31 12:05:59
摘要:网页设计师新手入行必备基本功。不少做平面的设计师想转行走网页设计这条路,做网页和做平面是完全不同的思维,加上还要熟悉或了解html和CSS代码,所以就很考验设计师的自学能力了。
网页设计师新手入行必备基本功。不少做平面的设计师想转行走网页设计这条路,做网页和做平面是完全不同的思维,加上还要熟悉或了解html和CSS代码,所以就很考验设计师的自学能力了。而且还有一点,我们在设计网页的过程中,并不是你想怎么设计都可以的,还要考虑编码实现和用户体验。那么今天我们就来和您聊聊,想转型成为网页设计师,需要必备的一些技能知识点:
Photoshop
Illustrator
HTML
CSS
Responsive
加分:Bootstrap、Sass、Compass、Susy…等,会套用现成的 jquery 包、JS 包之类也就差不多了。再深入就是F2E的领域。
Photoshop
基本中的基本,只要是任何单位是「PX」、给屏幕用的图稿我都建议用 Photoshop 制作,Illustrator 是印刷用软件,对 PX 支持度很差。
关于最基础的抠图,有的童鞋懂的方法还不全面,推荐从《从菜鸟到高手!PHOTOSHOP抠图全方位攻略》开始学习。
Grid
现在新开发的网页通常会要求制作 Responsive ,为了要方便套用 Bootstrap 或 Susy ,Grid 就是一定要懂的观念,《Guideguide下载及使用说明》能帮助你在 PS 里快速建立参考线。
切图
当你会写 Html、搞懂 Div、Css 后,你就知道怎么切图了(无误),不会写 Code 的视觉设计师切出来的图常常被退货也只是刚好…做个蛋糕需要糖和巧克力粉、材料供应却老给他盐和胡椒粉,是想逼写 Html 的人从种甘蔗和可可树开始吗?
Illustrator
既然都是平面设计师想转型,这套一定用的非常熟悉,可惜我对这套的定义就是「送印刷厂」用。在我的制图过程中,所有能用向量绘制的部份我都会用向量。PS 的向量工具不太好操作,遇到比较复杂的图型我会在 AI 里画好、贴进 PS 为形状图层,再来调整图层样式。所以 AI 只会用到画向量的功能,其他全进PS 处理。
HTML
推荐:HTML5
不会切图、不会手写 Code 的不要说自己是网页设计师,做网页只靠 Dreamweaver?和蒸饭箱蒸出来的便当感觉差不多,勉强能入口但很难吃。有的 RD 会接受用 Dreamweaver 之类可视化软件产生的 Code,这要看和设计师配合的 RD 接受度到哪里。通常平面想转网页设计很大部份是薪水可以喊比较高,如果想拿更高的薪水就不要依赖 DW ,老老实实的练英打吧。
想当个网页设计师, W3C 是一定要懂的。当然非常多的元素不会每个都记得,把这个网址当目录用吧,不懂或忘记就跑来查一下。All Standards and Drafts – W3C
补充:
W3Schools Online Web Tutorials
W3Fools – A W3Schools Intervention
CSS
推荐:CSS current work & how to participate
margin、padding 是初学者最容易搞混的两个值;Float 很常用但不小心就破版;熟悉 Background 可以玩出很多花样…等等。在 CSS 细节部份就可以偷懒一点用现成的了,虽然产出的 Code 比较丑不优雅,但 RD 比较少去动到这一块,所以还可以接受。我自己常用的偷懒工具如下:
圆角框:CSS Border Radius Generator
阴影:Box Shadow CSS Generator
按钮:Buttons – A button library built with Sass and Compass
可以看 browser 对 html、css 等等的支持度:Can I use… Support tables for HTML5, CSS3, etc
当然很有很多其他在线生成或是外挂包,欢迎大家补充,好让我能更偷懒一点…
Responsive
先把 Html 和 Css 练熟了再来看 Responsive 这个大难题。要做好一个 RWD 从 Wireframe 就要规划好。在 Wireframe 阶段我习惯先设计 Desktop 版本,功能最多最完善。但在写 Code 的时候会是反过来、先从 Mobile 的尺寸开始刻。刚接触 RWD 的先套 Bootstrap 增加成就感和手感,等熟悉了觉得不够用绑手绑脚的时候,差不多该踏进 Sass、Compass、Susy 的领域。
别用现成的软件做 Responsive,除非是纯静态网页不需要和 RD 合作,原始码脏就脏没关系反正不会有人看了。目前我看到「排排版就好」的软件产出的 Code 没有干净的,只要是之后有人还要接手的产出、拜托维持它的干净整齐。有没有打开厕所门看到一团乱产生晕眩感脸色发青的经验?看到恶心的 Code 就是这种感觉。
结论
以上写的非常粗浅,只能算是给个方向让初学者知道要怎么学习。最好还是去找个 F2E 拜师学艺一下,靠自己自学写出来的东西一定会被正规 RD 嫌弃,我就被老公骂过「这是什么邪魔歪道」,边哭边学被他嫌弃了一整年才得到勉强及格的评语。
如果能把上述 5 项都练起来,就能自己接案赚外快了。只要和程序无关的静态网页都难不倒你。网络上有些套装的特效包可以拿来改一改套用,看起来也很炫。(遇到需要套程序接后台的可以两手一摊说这超出网页设计的领域要找 RD 配合。)
网页设计和 F2E 职务范围部份重迭,都要写 Html、Css,注重使用者体验等等。最大的差别在于网页设计师要画 Flow、Wireframe、Mockup、切图、(标示文件),会写 JS 特效最好,不会写也没关系。但 F2E 就要对 JS 很熟悉了。网页设计师算是一脚踩在 UI/UX 圈、另一只脚踩在 F2E 边在线的角色。千万小心在 Code 上不要和 F2E 起争执,请谦虚求教,没事拿自己的弱项去撞别人的强项做什么?RD 写 Code 输给设计师是哪门子笑话?设计师强的当然是视觉啊!

你觉得这篇文章怎么样?

33

我们立足于合肥面向安徽乃至全国全球市场,我们拥有一支经验丰富、创意独到、团结协作的专业技术团队。我们立志把最好的技术通过最有效、最简单的方式提供给客户,为客户提供最佳的解决方案,我们将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,帮助客户在新经济时代下,把握商机和发展空间,并获得绝对的竞争力!我们专注于高端网站定制、系统开发、商城开发、外贸网站建设、公众号开发、小程序开发、网站优化推广、安全运维等技术领域。是高端定制网站领域著名服务商!

扫描二维码与小二CMS创始人沟通

7*24小时为您服务

小二CMS专注于高端网站定制、系统开发、商城开发、外贸网站建设、公众号开发、小程序开发、网站优化推广、安全运维等技术领域。是高端定制网站领域著名服务商!

本文标题:详解网页设计师新手入行必备基本功
免责声明:文章《详解网页设计师新手入行必备基本功》来至网络,文章表达观点不代表本站观点,文章版权属于原作者所有,若有侵权,请联系本站站长处理!
—— 小二CMS创始人微信 ——
关于我们

小二CMS专注于高端网站建设服务及定制,拥有丰富的企业网站建站经验。 近年来制作并完成了许多网站建设案例,企业品牌官网、营销型网站的建设、B2C网上商城系统开发、行业门户网站等平台开发,我们还提供了网站的策划、设计、开发、布署、安全等一站式专业的网站建设解决方案。小二CMS致力于研发国内最专业、功能最强大,扩展性能最自由灵活的高端行业通用的网站系统。我们做的不仅仅是网站系统,更多的是成就您的成功!

我们的优势

十年建站服务经验
服务1800家企业
资深行业分析策划
前沿视觉设计、研发能力
前端代码深度符合SEO优化
千家成功案例

独家源码出售
具有完备的项目管理
完善的售后服务体系
深厚的网络运营经验
时刻新技术领先研发能力
方便二次开发

我们的不同

我们是一个年轻且富有激情的团队,我们沉迷于代码并陶醉在设计之中。我们非设计,不生活;无兄弟,不编程!可年轻并不意味着没有经验。团队成员均来自各顶尖设计公司及软件公司,我们对网站设计及开发驾轻就熟,有着数百个成功案例。我们坚信用心服务,用实力说话!我们的使命:通过我们的努力,让技术改变命运!我们的宗旨:客户第一,品质至上!我们的信念:唯有客户的成功,才是我们的成功!

不忘初心,方得始终
中高端网站定制开发服务商
与我们取得联系

好作品自己会说话,

我们敬畏您给予的点滴信任 !

期待携手合作,请立即咨询我们:
QQ咨询 微信咨询
我们用心,期待您成为我们的客户

微信号:
添加微信好友, 详细咨询相关信息。

复制并跳转微信
19810950281