psd图片到html

正确的做法是:
拿到psd后,先不要做别的,直接在文本编辑器中将网页的框架写出来,不要假设这块将来css要去怎么渲染,完全自然化的标签,不加任何的css。
写完之后在各个浏览器运行之后确保大体定位都没有问题。
书写总体css,这里的css只负责大块的定位及样式。
切出需要的图片资源,在写好的框架中一点点的去构造,不断的调试,最终为成品。
最后,为自己的代码添加注释,在css,html中都要合适的为自己的代码添加注释。

时间: 2024-10-12 22:33:56

psd图片到html的相关文章

psd图片不能在网页上显示

原因:web上不支持psd图片,web支持JPG,PNG等. 解决:打开ps点击文件--储存为web所用格式(选择转换成哪种格式). 原文地址:https://www.cnblogs.com/hq12345/p/9378352.html

万彩动画大师 | psd格式图片的复现

万彩动画大师不仅支持导入psd格式的图片,而且图片在photoshop渲染后的效果也可以在万彩动画大师上更多更完美地复现出来. 在Photoshop中进行渲染的图片,如下图所示: 在万彩动画大师上导入上面的psd图片,效果图如下: 原文地址:https://www.cnblogs.com/focusky/p/10197149.html

常用的图片格式

常用图片格式 图片是网页制作中很重要的素材,图片有不同的格式,每种格式都有自己的特性,了解这些特效,可以方便我们在制作网页时选取适合的图片格式,图片格式及特性如下: 1.psd psd是photoshop的专用格式,UI设计师使用photoshop设计效果图,最后会将psd格式的效果图交付给前端工程师,这种格式是不压缩的,而且保留了图层.透明和半透明等图片信息,所以这种图片格式的容量相对来说是很大的,前端工程师使用这种格式的效果图来切图制作网页,但是网页中不会使用这个格式的图片,它的作用一是保存

3.1、常用图片格式

图片是网页制作中很重要的素材,图片有不同的格式,每种格式都有自己的特性,了解这些特效,可以方便我们在制作网页时选取适合的图片格式,图片格式及特性如下: 1.psdpsd是photoshop的专用格式,UI设计师使用photoshop设计效果图,最后会将psd格式的效果图交付给前端工程师,这种格式是不压缩的,而且保留了图层.透明和半透明等图片信息,所以这种图片格式的容量相对来说是很大的,前端工程师使用这种格式的效果图来切图制作网页,但是网页中不会使用这个格式的图片,它的作用一是保存图片的原始数据,

photoshop软件应用手记

------------------------常用图片格式------------------------ 位图和矢量图 位图也叫点阵图,是由一个个的方形的像素点排列在一起拼接而成的,位图在放大时,图像会失真.上面讲的5种图像都属于位图.矢量图和位图组成图像的原理不同,它的图像轮廓是由函数曲线生成的,当放大图像时,实际的原理就是将曲线乘以一个倍数,图像可以轻易地放大,而且不会出现像素块,图像边缘也不会出现锯齿. 位图1.psd psd是photoshop的专用格式,UI设计师使用photosh

什么是CSS网页切图

经常有人问我CSS网页切图是什么东东.在这里详细给大家解答一下 在说CSS网页切图之前,我先给大家说一下一般制作一个网站需要步骤 一.网页设计人员会根据客户要求在PS中设计出网页效果图,这个效果图一般会存储为PSD格式 二.网页前台人员需要根据设计师所出的效果图(PSD文件)进行切图. 三.程序人员会根据网页前台人员所提供网页进行程序的制作. 那也就是在网站制作第二步我们会用到CSS网页切图.其实说白了就是把一个图片转成网页的过程.因为设计人员所出网页效果图是没有链接.是不能直接供后台人员使用的

手把手教你使用PS切图

在IT公司中一般都是一个UI设计师对应多个程序员,所以有时候UI设计师有点忙不过来,但是我们也不能干等着,所以这时候就需要自己动手,丰衣足食了,下面就来介绍一下如何使用PS进行切图,不过Android中还有.9图片的概念,所以这里还需要介绍一下如何制作.9图片,关于.9图片的知识转战:http://blog.csdn.net/jiangwei0910410003/article/details/16986079 这里就以一张demo.psd图片作为案例: 这里通过三个例子来进行演示 第一.把中间

css学习日记

相对偏移 指定left top等属性就能够够完美控制一个元素的位置 如: position:relative; left:2px; 今天遇到一个很好玩的问题,当两个并排浮动框,当一个框的长度太大时就会把另一个框顶到下一行,这个时候就可以用margin-right:-2px;将右外距设置为负数来解决! css写表达式控制图片大小,当图片大小大于某一数值时,强制设置其宽 高为指定大小. img { max-width: 163px; width:expression(this.width > 163

个人网站架构设计(三) - 从设计到前端到后台

在五月份,写过两篇博客,提到了要给自己做个网站,当时人在实习,没太多的时间,只是把大概的思路捋了一番,顺道也买了个云主机(配置比较低,内存才500M).接着返校处理毕业事宜,于是六月也随着同学之间挥泪告别的声音渐渐远去.七月,家里呆着,中旬回公司.想必这也是我近几年最长的一次假期了=. = 一.先说设计 1. 阮一峰的博客 目前我的博客设计是 fork 了 BeiYuu 的主题,然后七改八改,除了主页 BeiYuu 还认得出是他的之外,其他页面已经动了很大的手术,而这些手术灵感都是源自阮一峰阮大