前端教程

首页>前端教程

UI学习第五课:图层模式

ps中的很多工具都可以使用图层模式,而图层模式又是很多同学搞不清楚的。其实,我们要掌握它的规律,不管是哪种工具使用图层模式,原理都是一样一样的。图层模式分为6大块。第一块的正常就是什么效果都没有。溶解需要透明度的配合。透明度越低,溶解效果越明显。第二个模块是变暗模式,就是说这个模块里面的五个命令都会...

喜欢一个字体,但是不知道是什么字体怎么办?

做设计的时候常常遇到这样的问题,看到别人的设计效果图上的字体很漂亮,好想用,但是不知道是什么字体?于是跑去设计师群里问大神,“求大神,这是个什么字体?”于是,得到这样一张图片。今天就教大家一个小技巧,如果用求字体网找字体,而不是去求人。1、每天扫图看别人的设计的时候,关注一下字体,看到好看的字体自己...

UI学习第四课:选区

选区作为基础的选取对象工具,主要有规则选区、不规则选区和魔棒等工具。有一个细节要注意,如果选区内没有像素,要变换选区则要使用“变化选区”的命令,如果选区内部有像素,则可以使用“自由变换(ctrl+T)”的命令。1、使用了“自由变换”或者“变换选区”命令后,再右键单击,就可以出现变换面板,主要包含“自...

UI学习第三课:初识ps

学习了素描中基本的点线面、三大面、五大调子、透视等基础后,开始进入ps的学习。一、ps的模块1、菜单栏菜单分为公共菜单和私有菜单。比如“文件”、“编辑”、“窗口”、“帮助”等菜单是绝大部分软件都有的,如果有学习过别的软件的基础,这几个菜单应该很好掌握。文件菜单主要负责“新建”、“打开”、“保存”、“...

UI学习第二课:透视

如果想让自己画的画不变形,看起来不别扭,就需要掌握一点透视的基础。一、透视的常用术语视平线:就是与画者的眼睛平行的水平线。心点:就是画者眼睛正对着的视平线上的一点。视点:就是画者眼睛的位置。视中线:就是视点与心点相连,与视平线成直角的线。消失点:就是与画面不平行的成角物体,在透视中伸远到视平线心点两...

UI学习第一课:素描之三大面五大调子的学习

UI1703直播班开班了,记录下整个班级的学习过程,也是为学生们做好笔记吧。3.2日开始第一课,每天一个下午,上午学生练习做作业。第一天的课程讲解素描的基本技法,主要就是握笔姿势、画线、三大面,五大调子的学习。一、握笔的姿势↓二、排线的姿势利用手腕和手臂的力量画线。但是也有人说,摆的是膀臂,不是手腕...

原来衬线字体和非衬线字体是这样区分的!

最近常看一些设计类的文章,其中关于字体的两个术语把我弄晕了:衬线字体和非衬线字体。于是百度了一下,终于搞明白了,如果你也有这样的疑惑,可以看看哦。先看看下面Google的logo图,有两种字体,你能分清楚哪个是衬线体,哪个是非衬线体吗?简单总结就是:衬线体的笔画在开始和结束处有额外的修饰,并且笔画横...

这次来点符合国情实际的:零基础如何自学UI设计?

昨天推荐了一篇自学设计的文章,但是那是转载自国外,不太符合中国国情,虽然学习的曲线是一样的,或者说学习的本质是一样的,但是来看一篇国产的自学UI设计指南更合大家的胃口。以下文章转载自优设网。酸梅干超人:下面是我这几年经验的总结和思考,虽然我并不算是最出类拔萃的UI设计师,但也希望对新人有益。第一点:...

设计师完全自学指南,不得不推,看完超燃!

昨天推荐了一个新手学习UI的网站,但是如果你已经度过了小白期,进入菜鸟期,那么我今天推荐一个更棒的网站:优设网。这个网站是我每天必逛的设计类网站,当然微信公众号也是每天查看。可以说只要你是设计师,不管是什么设计师,都可以关注该网站,是我压箱底的推荐啦。点击网址直达:www.uisdc.com悄悄告诉...

推荐一个新手开始学习UI的网站:学UI网,很有条理性的学习网站!

从软件开发教研组转到了UI项目部,接触的学生们都是以学习UI为目标的,作为web前端开发的老师其实和UI还是隔了一条街的。毕竟我们是UI下游的工作。为了能够顺利和UI的同学们沟通,我也要开始UI的学习过程了,说不定在此过程中,我也转行了。OK,it's a joke!ps:说好的JavaSc...

CSS3教程:background-image之放射性渐变(radial-gradient)详解

 写完了linear-gradient线性渐变的初级教程后,看到了Lea Veron博客上那个用渐变做的图案集,我瞬间就觉得自己的想象力弱爆了。容我躺躺,再站起来继续战斗!缓过来了,开讲放射性渐变吧。一、放射性渐变原理别人都用ps解释,我却在渐变上独喜欢flash的渐变变形工具。别人都说径...

CSS3教程:background-image之线性渐变(linear-gradient)最in版!

 long long  ago,我很不喜欢用CSS3的渐变,宁愿一切纯色扁平,因为那时候的渐变TMD太复杂了,版本太多了,真的很想死!今天百度linear-gradient的关键词,翻出的文章几乎都是2011年——2013年的,版本太out了,难道不知道webkit和moz已经手...

CSS3教程:border-radius你以为就是个圆角边框吗?

很多人拿border-radius就是做点圆角效果,或者弄一个圆形的头像(说的就是以前的自己^_^),但,这些都是没有真正发掘border-radius的价值的!先看看一些别人的效果↓˂a title="各种参数设置的效果展示,包括兼容性" href="http://muddledramblings...

CSS3教程:box-shadow盒阴影详解

最近忙着暑期补课,在招生路线上,搞得很紧张啊,我的痘痘都多冒了好几颗。关键是一个星期补六天课,还包括三个晚上,觉得日子怎么过得那么慢呢!忙里偷闲,还是继续CSS3的学习之旅吧。讲完了text-shadow,今天我们来八一八box-shadow这个看起来很相似...

CSS3教程:text-shadow文字阴影详解

在web的早期战场,要实现文字或者图片或者盒的阴影效果,必须启用图片,导致html代码和css代码量都要增加很多,而现在,利用css3新增的text-shadow和box-shadow可以轻松完成阴影的添加,而且效果自然,不逊于ps制作出的效果,唯一的问题就是多层阴影的时候可能渲染要多耗费一点性能。...

CSS第十八课:PC端和移动端下拉菜单的实现

在CSS第八课讲解了如何制作水平和纵向导航,然后拖到了第十八课才讲解下拉菜单,为什么呢?因为下拉菜单必须要在明白了相对和绝对定位后才能讲解。如果你没有搞定CSS十六课和CSS十七课,建议你出门左拐下两层楼,先看完相对定位和绝对定位再来学习下拉菜单吧。下拉菜单作为导航目录较多的网站的必备武器,的确可以...

CSS第十七课:绝对定位(position:absolute)详解

从小我们学习物理,就知道一句话:“运动是相对的”。或者有人生阅历丰富的人以一种长者的口吻告诉你,“没有什么是绝对的”。那么,绝对定位是否可以说并不是真正的绝对呢。同上,先来看看W3C官方文档怎么说。设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始...

CSS第十六课:相对定位(position:relative)详解

网页的元素默认有四种定位:static(静态文档流)、fixed(固定)、relative(相对)、absolute(绝对)。static就是文档中按照先后顺序正常出现的元素,也是默认的定位方式。比如标题、段落等等普通文档流元素。来自于W3C官方文档的引用:除非专门指定,否则所有框都在普通流中定位。...

CSS第十五课:固定定位(position:fixed)在布局上的应用

固定布局非常有辨识度,那就是无论页面有多长,滚动条怎么滚动,固定的容器都相对于浏览器是静止的,脱离了整个文档流的限制,漂浮在高空中,纹丝不动。常见的固定布局有侧边栏和头部导航固定,“返回到顶部”,“分享”、弹出层等等。比如:赵老师网站前端博客的左边侧栏就是固定不动的。比如:网易的头部导航就是固定不动...

CSS第十四课:头尾自适应+主体固定宽度居中对齐布局

完全自适应的网站很少见,估计是难度有点大吧,或者说是在国内的环境下,精确布局能有更好的视觉和用户体验。所以,很多网站就退而求其次,头尾内容少的部分自适应浏览器,而中间主体内容比较多的还是采用固定宽度居中对齐的方式布局。就好像一个“工”字一样。典型的网站有:站酷查看案例一、百分比的width和min-...
Top