我所了解的WEB开发(2) - PS切片

PS对于WEB设计和前端开发来说都是不可或缺的工具,基本的用途是用来处理网站的LOGO、Banner 以及按钮图标来着,但是一旦遇上要把整个PSD文件转成网页就让人非常头痛了,可能还不太专业。
后来在公司做个网站项目中,美工一般都能给出切图和CSS文件,解决了很大的问题。那个时候我还没想到PS还有一个很重要的工具【切片】,这个工具提供了一个非常实用的功能,将切片导出为DIV+CSS布局。
以下是摘抄:http://www.blogjava.net/algz/articles/297304.html

在修改好相应的文字与图象之后,我们就将PSD文件输出(X)HTML文件。

首先得先对PSD文件做切片,有两种方法:

①使用工具栏上的“切片工具”,

然后在图象上划出一块一块的区域。

②使用基于参考线的切片,按ctrl+R调出标尺栏,

把鼠标移动到标尺上,按住鼠标左键,移动到图象上,将会看到一条绿色的参考线,如图

将参考线;排好,然后点一下工具栏上的切片工具图表,然后点上面

选项栏里的“基于参考线的切片”。于是在原来的参考线上就变成了一块一块的切片了。

********************************************************************************

接下来就可以输出了:
①依次选择菜单栏上的“文件”→“存储为Web所用格式”→“存储”。

②接下来就会弹出一个“将优化结果存储为”的窗口。

在“保存类型”处有个下拉列框可以选择,因为我们要存储为网页的格式,所以选择“HTML和图象(* html)”,再选择“保存”就可以输出一个网页格式的HTML文件与一个包含图象的名为“images”的文件夹。

③如果我们需要输出“div+css的网页”我们还可以这么做:
在“设置”处的下拉列框,选择“其他”

就会弹出一个“输出设置”的窗口
在第2个下拉列框处选择“切片”,选择“生成CSS”,单击“好”→“保存”,就可以输出一个目前流行的“div+css”的HTML网页。

时间: 2024-12-25 00:43:36

我所了解的WEB开发(2) - PS切片的相关文章

Web开发入门不得不看

如今,各种互联网的Web应用程序层出不穷,那么如何快速入门,成长为一个优秀的Web开发工作者呢? 这个问题不容易回答,几乎所有的培训机构都不能清晰地解答. 所以对于Web开发刚刚入门的菜鸟们,我觉得只有通过去做,去实验,学会Web开发,可能是学着学着,实验着实验着就会了. 没有人告诉你如何去做.我学习的时候,我的导师只是给了我一堆视频,一堆文档.我们从明确一个目标开始:"哦,这个阶段,我要独立完成一个简单的Web应用程序,例如新闻发布系统". 或许学会如何开发Web应用程序只是在完成这

Redis的Python实践,以及四中常用应用场景详解——学习董伟明老师的《Python Web开发实践》

首先,简单介绍:Redis是一个基于内存的键值对存储系统,常用作数据库.缓存和消息代理. 支持:字符串,字典,列表,集合,有序集合,位图(bitmaps),地理位置,HyperLogLog等多种数据结构. 支持事务.分片.主从复之.支持RDB(内存数据保存的文件)和AOF(类似于MySQL的binlog)两种持久化方式.3.0加入订阅分发.Lua脚本.集群等特性. 命令参考:http://doc.redisfans.com 中文官网:http://www.redis.net.cn 安装(都大同小

移动端web开发常见问题

上一篇总结了一些有关html5和css3的面试题,这一篇是有关于移动端web开发的常见问题,希望一样对你有一些帮助. Meta相关 1. 添加到主屏后的标题(IOS) <meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式(IOS) 当网站添加到主屏幕后再点击进行启动时,可隐藏地址栏(从浏览器跳转或输入链接进入并没有此效果) <meta name="a

[Java Web] 1\Web开发初识——一大堆历史和技术名词

LZ前言 LZ最近发现网络真是个神奇的东西,以前做的好玩的只能自娱自乐(或者说顾影自怜),现在只要发一个帖子,写一个博客,很快能引来一大群小伙伴的围观(有时候还能遇见几个大牛给个战略性的指导)...LZ本来是搞硬件的:从CPU的制造(VHDL).数电.模电再到计算机组成原理.汇编.接口技术,底层的东西算是走马观花地懂了点皮毛,正好大一的时候又了解一点计算机的编程知识(当时第一次用C++Build写出来个Hollo World那个欣喜呀~后来又从win32学到MFC再到C#,嘿嘿,基本上还是皮毛吧

linux web开发常用命令

:q 退出 vi :wq 保存并退出 vi :wq! 强制保存并退出 vi #tail -f catalina.out  查询tomcat后台输出 在Linux系统下,重启Tomcat使用命令操作的! 首先,进入Tomcat下的bin目录 cd /usr/local/tomcat/bin 使用Tomcat关闭命令 ./shutdown.sh 查看Tomcat是否以关闭 ps -ef|grep java 如果显示以下相似信息,说明Tomcat还没有关闭 root 7010 1 0 Apr19 ?

Web开发人员不要错过的60款用户界面设计工具(中)

21. Dojo Dojo是一个用javascript语言实现的开源DHTML UI工具包,可实现高性能的桌面和移动应用程序开发,在国内亦有大量忠实用户. 22. Fivesecondtest Fivesecondtest可以优化你的登陆界面,并分析设计中最突出的元素. 23. Android UI Elements Set 集合了大量Android OS UI元素,并且全部都是免费的. 24. Massive Web UI and Button Set Massive Web UI and B

Web开发中 前端路由 实现的几种方式和适用场景

浅析Web开发中前端路由实现的几种方式 主题 Web开发 故事从名叫Oliver的绿箭虾`说起,这位大虾酷爱社交网站,一天他打开了 Twitter ,从发过的tweets的选项卡一路切到followers选项卡,Oliver发现页面的内容变化了,URL也变化了,但为什么页面没有闪烁刷新呢?于是Oliver打开的网络监控器(没错,Oliver是个程序员),他惊讶地发现在切换选项卡时,只有几个XHR请求发生,但页面的URL却在对应着变化,这让Oliver不得不去思考这一机制的原因- 叙事体故事讲完,

[译]作为一个web开发人员,哪些技术细节是在发布站点前你需要考虑到的

前日在cnblogs上看到一遍文章<每个程序员都必读的12篇文章>,其中大多数是E文的. 先译其中一篇web相关的"每个程序员必知之WEB开发". 原文: http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before 问:对于一个web开发人员来说,在发布一个站点之前,他需

一个web开发人员在发布站点前你需要考虑哪些技术细节

转自http://www.xker.com/page/e2014/0520/132486.html 一个web开发人员在发布站点前你需要考虑哪些技术细节 文章转自Hedgehog博客 前日在cnblogs上看到一遍文章<每个程序员都必读的12篇文章>,其中大多数是E文的. 先译其中一篇web相关的”每个程序员必知之WEB开发”. 原文: http://programmers.stackexchange.com/questions/46716/what-technical-details-sho

浅析Web开发中前端路由实现的几种方式

故事从名叫Oliver的绿箭虾`说起,这位大虾酷爱社交网站,一天他打开了 Twitter ,从发过的tweets的选项卡一路切到followers选项卡,Oliver发现页面的内容变化了,URL也变化了,但为什么页面没有闪烁刷新呢?于是Oliver打开的网络监控器(没错,Oliver是个程序员),他惊讶地发现在切换选项卡时,只有几个XHR请求发生,但页面的URL却在对应着变化,这让Oliver不得不去思考这一机制的原因… 叙事体故事讲完,进入正题.首先,我们知道传统而经典的Web开发中,服务器端