CSS制作之PS对源网页美工图片分析

PS
363
文章
16
评论
2020年2月24日13:53:43 评论 136

平日div+css网页拓荒者拿到一个需要切图开发重构的网页美工图的时候,都不是直接到软件中切图的,而是需要对这个网页美工图进行阐发,综合要点以下:

1、赏析网页机关是怎么样样的

2、分析不需要切进去的图片有哪些

3、分析切图前需要窜伏的笔墨模式

4、赏析怎么样切图概略不利于架构网页(与第一点有沟通)

5、综合怎么样切图兴许削减图片大小(字节,图片文件大小)

6、思考到有利于seo

7、阐发切图一再性,如有些后盾图片需要频频便可,那就只有要切一块便可,无需整图切上来

8、阐发网页特效局部,筹备筹画殊效制作方法方案。

下面咱们通过一个简单实例讲解让人人把握以上知识。

讲授实例截图:CSS制作之PS对源网页美工图片分析

CSS解析图截图

CSS讲授内容:

1、打造网页前解析美工图片组织

经由过程以上彀页图片傍观,我们可以从上到下,从外到内解析得到,网页是上中下结构,上是顶部头部、中是内容、下是底部版权,两头内容区是支配布局。

CSS制作之PS对源网页美工图片分析

分析造诣截图

遵循以上绘图咱们便可得出A是上B是中C是下,而B又搜聚了D与E摆布两部一小部分。

2、分析不需要切进去的图片有哪些

按照阐发以上图片除了A区头部后盾大要切出来,其余兴许没必要PS切成小图片作素材。

CSS制作之PS对源网页美工图片分析

切出图片素材

可将这个作为后台,当然切的时候宽度概略小一点,切成2-5像素就可

3、阐发切图前需要窜伏的文字形式

虽然这里这张要制作的图片根蒂根基不冗杂,也没有盖住需要切图的后援,以是没需求埋伏盖住后盾图片的笔墨或形式

4、思忖到无利于网站排名

也许将A区的

CSS制作之PS对源网页美工图片分析

图片的翰墨当做webLOGO可能用h1标签来制作网页,也是思索到SEO角度。此外笼统没须要思索。

结尾最早引见赏析一个网页美工的几点,在这里不有触及到所以就没须要讲,只管平日产的时辰需要你操作把持及使用,要害是在出产和开辟DIV+CSS网页的时分做到胸中有数,而成竹在胸就需要你对岂论多繁杂或多简单的网页进行分析与熟习解读。

  • 本文由 发表于 2020年2月24日13:53:43
PS前端切图完整教程 切图教程

PS前端切图完整教程

部分看了文章的设计师,来找我说怎么切图。sorry?在我的理解,这就是切图啊,但是他们所指的“切图”是,怎么把设计图制作成html页面,下面我们通过详细案例讲解PS前端切图完整教程。 在我看来,现在人...
HTML5+CSS3技术ps页面切图 切图教程

HTML5+CSS3技术ps页面切图

准备一个标准网站模板:中国节能环保集团公司 网址去某度自己行查找 利用photoshop cs6 专业工具进行简单切图: 粗略切图后如下: 之后将其存储为html和图像格式: 步骤 -->文件 ...
photoshop兄弟的ImageReady 切图教程

photoshop兄弟的ImageReady

假设Photoshop是网页筹画专门使用图像东西的话,ImageReady就会被纯粹吸引在Photoshop中,就不会有独立运转的软件形式。因为Photoshop也使用在网页用意之外的得多规模,所以不...
PS如何用标尺线快速切长图? 切图教程

PS如何用标尺线快速切长图?

例如我有一张500*5000的长图,体积超过10M。上传到网站的时候很慢。现在我想把这张长图切成5张500*1000的组合图,分别上传。接合部位要切的精准。用PS如何自动切图呢?下面我们就一起来看看P...
CSS切图学习之认识PHOTOSHOP(PS) 切图教程

CSS切图学习之认识PHOTOSHOP(PS)

CSS切图软件之ps截图 Adobe PHOTOSHOP平时咱们又被喻为PS。 少数人关于PHOTOSHOP的了解仅限于“一个很好的图象编纂软件”,其实不晓得它的诸多应用方面,实践上,PHOTOSHO...
前端ps切图方法,图文详细 切图教程

前端ps切图方法,图文详细

我现在使用的版本号:PS-CS6,网上很多破解版本的自行搜索下载。 1.选择“窗口”——把“信息”,“图层”,“历史记录”,“颜色”面板打开,其他的可以先关闭了,在切图的工作中其他的基本用不到,这个很...
匿名

发表评论

匿名网友 填写信息