CSS+div网页制作PS切图攻略

认识Photoshop(PS)CSS切图必用工具

Adobe PHOTOSHOP平时我们又被称为PS。

 

div CSS必备切图工具PS截图

多数人对于PHOTOSHOP的了解仅限于“一个很好的图像编辑软件”,并不知道它的诸多应用方面,实际上,PHOTOSHOP的应用领域很广泛的,在图像、图形、文字、视频、出版各方面都有涉及。

请看下面介绍:

平面设计

平面设计是PHOTOSHOP应用最为广泛的领域,无论是我们正在阅读的图书封面,还是大街上看到的招帖、海报,这些具有丰富图像的平面印刷品,基本上都需要PHOTOSHOP软件对图像进行处理。

修复照片

PHOTOSHOP具有强大的图像修饰功能。利用这些功能,可以快速修复一张破损的老照片,也可以修复人脸上的斑点等缺陷。

广告摄影

广告摄影作为一种对视觉要求非常严格的工作,其最终成品往往要经过PHOTOSHOP的修改才能得到满意的效果。

影像创意

影像创意是PHOTOSHOP的特长,通过PHOTOSHOP的处理可以将原本风马牛不相及的对象组合在一起,也可以使用“狸猫换太子”的手段使图像发生面目全非的巨大变化。

艺术文字

当文字遇到PHOTOSHOP处理,就已经注定不再普通。利用PHOTOSHOP可以使文字发生各种各样的变化,并利用这些艺术化处理后的文字为图像增加效果。

网页制作

网络的普及是促使更多人需要掌握PHOTOSHOP的一个重要原因。因为在制作网页时PHOTOSHOP是必不可少的网页图像处理软件。

建筑效果图后期修饰

在制作建筑效果图包括许多三维场景时,人物与配景包括场景的颜色常常需要在PHOTOSHOP中增加并调整。

绘画

由于PHOTOSHOP具有良好的绘画与调色功能,许多插画设计制作者往往使用铅笔绘制草稿,然后用PHOTOSHOP填色的方法来绘制插画。

除此之外,近些年来非常流行的像素画也多为设计师使用PHOTOSHOP创作的作品。

绘制或处理三维帖图

在三维软件中,如果能够制作出精良的模型,而无法为模型应用逼真的帖图,也无法得到较好的渲染效果。实际上在制作材质时,除了要依靠软件本身具有材质功能外,利用PHOTOSHOP可以制作在三维软件中无法得到的合适的材质也非常重要。

婚纱照片设计

当前越来越多的婚纱影楼开始使用数码相机,这也便得婚纱照片设计的处理成为一个新兴的行业。

视觉创意

视觉创意与设计是设计艺术的一个分支,此类设计通常没有非常明显的商业目的,但由于他为广大设计爱好者提供了广阔的设计空间,因此越来越多的设计爱好者开始了学习PHOTOSHOP,并进行具有个人特色与风格的视觉创意。

图标制作

虽然使用PHOTOSHOP制作图标在感觉上有些大材小用,但使用此软件制作的图标的确非常精美。

界面设计

界面设计是一个新兴的领域,已经受到越来越多的软件企业及开发者的重视,虽然暂时还未成为一种全新的职业,但相信不久一定会出现专业的界面设计师职业。在当前还没有用于做界面设计的专业软件,因此绝大多数设计者使用的都是PHOTOSHOP。

上述列出了PHOTOSHOP应用的13大领域,但实际上其应用不止上述这些。例如,目前的影视后期制作及二维动画制作,PHOTOSHOP也有所应用的。

PHOTOSHOP的特色:

从功能上看,Photoshop可分为图像编辑、图像合成、校色调色及特效制作部分。

图像编辑是图像处理的基础,可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等。也可进行复制、去除斑点、修补、修饰图像的残损等。这在婚纱摄影、人像处理制作中有非常大的用场,去除人像上不满意的部分,进行美化加工,得到让人非常满意的效果。

图像合成则是将几幅图像通过图层操作、工具应用合成完整的、传达明确意义的图像,这是美术设计的必经之路。photoshop提供的绘图工具让外来图像与创意很好地融合,成为可能使图像的合成天衣无缝。

校色调色是photoshop中深具威力的功能之一,可方便快捷地对图像的颜色进行明暗、色编的调整和校正,也可在不同颜色进行切换以满足图像在不同领域如网页设计、印刷、多媒体等方面应用。

特效制作在photoshop中主要由滤镜、通道及工具综合应用完成。包括图像的特效创意和特效字的制作,如油画、浮雕、石膏画、素描等常用的传统美术技巧都可藉由photoshop特效完成。而各种特效字的制作更是很多美术设计师热衷于photoshop的研究的原因。

以上信息引用百度百科photoshop介绍:http://baike.baidu.com/view/2929.htm

我们推荐使用Adobe Photoshop CS 8.0版本

总结:

photoshop这里对于我们来说主要是让大家认识是网页美工制作工具,网页美工开发工具,div+css重构必备工具,一般设计的网页美工都是没有合层的是以PSD格式保存的,所以注意的是如果你用PS设计网页美工最后不要将文件图层合并,最后一PSD格式保存,以便以后的修改及切图。

PS软件在DIV CSS开发中用于做什么

Photoshop软件简称PS在DIV CSS开发中用于做什么?

在DIV CSS开发中PS软件是必不可少的软件,主要用于DIV+CSS开发时切出布局图片素材、获取宽度值、获取高度值、获取颜色值、获取padding值、获取margin值等。

在整个CSS开发PS扮演角色

在CSS DIV开发中PS软件一直是使用的,因为整个开发全程都需要PS打开美工图(常见PSD文件),因为我们布局时所设置样式单词或样式值都需要使用PS软件获得,所以整个开发过程中CSS代码开发时软件与PS软件同时打开使用。

PS开发中得到什么?

在CSS布局中所有样式值都是从美工图上获取得到,而非猜测随意设置样式值。比如设置宽度、高度、padding、margin的尺寸值都是使用PS软件从打开美工图中使用切片工具获得,具体获得方法技巧截图DIVCSS5会在后面PS教程给出;当然网页布局中设置背景颜色、字体颜色、边框颜色等这些具体的值当然也是100%从美工图获取准确的颜色值,而非自己凭空猜测大概设置。

我们在布局CSS时,具体长度尺寸很大时候不能误差1px,颜色值也是不能有误差,不然这里误差一点那里误差一点最后制作出HTML可想而知,当然是不能使用而且不严谨。

DIVCSS5最后提示:

在开发CSS过程中随时都是开发CSS软件和PS软件都是一直同时打开,开发代码过程中需要值马上回到PS软件准确获取,当然很多都不会PS软件,不过没事其实在CSS开发中用到PS软件就那几个功能和技巧,接下来DIVCSS5会陆续为大家以图文教程方式奉献出。

PS软件CSS切图应用常用快捷键

Photoshop软件CSS切图应用常用快捷键介绍

本节DIVCSS5为大家介绍在切图时PS软件的常用快捷键,通过快捷键介绍让不会PS的您也对PS有一定应用。

1、放大美工图

ctrl+++

按住“Ctrl”键不放然后按“+”加号键即可不断放大所打开美工图

2、缩小美工图

ctrl---

按住“Ctrl”键不放然后按“-”减号键即可不断缩小所打开美工图

3、拖动美工图

按住“空格键”不放时鼠标会变成手掌一样图标,这个时候鼠标点击不放移动即可拖动整个网页美工图

4、全屏与固定屏幕模式

将网页美工图转为不固定拖动范围,英文小写输入情况按“F”字母键,切换,可以三种模式互转

Photoshop之CSS切图时常用工具

Photoshop切图时常用工具,CSS div制作前PS软件常用工具介绍。

1、移动工具

 

ps 移动工具截图

常用于选中图层对象使用,移动选中图层对应内容(图片或文字图层)在美工图位置

2、切片工具

 

ps切片工具截图

切片工具,是切图最重要的工具,在美工图上直接可以画好要切出的图片区域,最后即可导出为可以使用CSS布局的图片素材。

3、切片选择工具

 

ps切片选择工具截图

切片选择工具其实是与切片工具对应,在一个美工图中,使用切片工具会切出很多切片区域,但是要修改或选择以前切片划分好的切片这个使用就只能使用切片选择工具才能选中对应切片区域进行选择或修改。

4、前景色

 

前景色

两个正方形一样是方块,浮动最上面为前景色。前景色可以使用快捷键“alt+del”组合键,填充对应虚线选区或图层。

5、背景色

 

ps背景色工具截图

两个正方形一样是方块,靠后为背景色。背景色可以使用快捷键“ctrl+del”组合键,填充对应虚线选区或图层。

6、字体工具

 

ps字体工具截图

字体工具可以点击后在设计图上直接点击后输入文字,文字可以改变字体大小、字体、加粗、斜体等美化效果。

时间: 2025-01-21 13:34:25

CSS+div网页制作PS切图攻略的相关文章

精通CSS+DIV网页样式与布局--图片效果

        提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过照片处理软件轻松实现自己想要的照片效果.这篇博客,小编将继续来总结CSS+DIV的其她效果来进行分析,有兴趣的小伙伴可以点击以下链接,了解小编之前讲解过的关于CSS的一些基础知识:         精通CSS+DIV网页样式与布局--初探CSS        精通CSS+DIV网页样

精通CSS+DIV网页样式与布局--初探CSS

        CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离.提起DIV+CSS组合,还要从XHTML说起.XHTML是一种在HTML(标准通用标记语言的子集)基础上优化和改进的新语言,目的是基于XML应用与强大的数据转换能力,适应未来网络应用更多的需求."D

javascript-js模仿ps切图功能怎么做?

问题描述 js模仿ps切图功能怎么做? 最近要写一个功能,js模仿ps动态切图的功能,一直没有思路,请各位大神指教,跪谢!!!! 解决方案 开源中国找插件....

《HTML CSS JavaScript 网页制作从入门到精通 第3版》—— 第02章 HTML基本标记

第02章 HTML基本标记 HTML CSS JavaScript 网页制作从入门到精通 第3版 一个完整的HTML文档必须包含3个部分:一个由元素定义的文档版本信息:一个由 定义各项声明的文档头部:一个由定义的文档主体部分.作为各种声明信息的包含元素出现在文档的顶端,并且要先于出现.而用来显示文档主体内容.文字是网页中最基本的信息载体,文字通过不同的排版方式.不同的设计风格排列在网页上,提供了丰富的信息.文字的控制与布局在网页设计中占了很大比例,因此掌握好文字的使用,对于网页制作来说是最基本的

《HTML CSS JavaScript 网页制作从入门到精通 第3版》—— 导读

前言 HTML CSS JavaScript 网页制作从入门到精通 第3版十多年前,Internet在国内开始流行.其中,网页作为互联网的主要媒介受到了电脑爱好者的广泛关注.由于当时网速的限制,网页主要承载文本.图片等简单数据,使用Dreamweaver或Frontpage软件即可轻松制作网页.而今天,Internet领域已经改变了太多,在软件上点几下.拖几下即可完成整个网站的方法已经完全不适用了.现在的网页制作领域综合了多种技术,新一批的初学者该怎样学习网页制作?目前大部分制作网页的方式都是运

页面制作部分之PS切图

原文: http://www.cnblogs.com/jingwhale/p/4396235.html      网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图.       我们通过设计稿,得到我们想要的产出物(如.png,.jpg文件),给网页提供图片素材(HTML:img,CSS:background). 一.使用PS工具 1.1 PS首选项设置 编辑->首选项->单位与标尺,选改为

css命名规则:图片切图转网页的代码规范

文章简介:网页切图过程中div+css命名规则. 网上整理的比较好的css命名规则,为css代码的规范化做参考,增加代码的可读性. id的命名: (1)页面结构 容器: container 页头:header 内容:content/container 页面主体:main 页尾:footer 导航:nav 侧栏:sidebar 栏目:column 左右中:left right center 页面外围控制整体布局宽度:wrapper (2)导航 导航:nav 主导航:mainbav 子导航:subn

精通CSS+DIV网页样式与布局--制作实用菜单

        在上篇博文中,小编中主要的简单总结了一下CSS中关于如何设置页面和浏览器元素,今天小编继续将来介绍CSS的相关基础知识,这篇博文,小编主要简单的总结一下在CSS中如何制作网页中的菜单,这部分的内容包括:项目列表.无需表格的菜单.菜单的横竖装换,看下面一张思维导图:                    首先,我们看项目列表,列表的符号,我们来看例子代码和运行效果:           <span style="font-size:18px;"><spa

网站制作的切图技巧

一般的网站制作步骤大体上为:设计效果图–>切图+制作静态html模板–>嵌套至CMS,其中,切图虽然是很简单的一个步骤,但其中也有很多技巧,以下是我个人总结出来的几点. 总体上,把握一个原则,能用css写的,坚决不要用图片.经验告诉我们,首页图片很多的网站打开会很慢,一是因为图片多,需要下载的文件体积就增大,二是每一个图片下载都会对服务器有一个请求,增大了浏览器与服务端的交互次数,如果能把纯色的部分用css来写,而不因为省事直接切图,就会极大提高网站的运行效率,我最早开始学习制作网站时,就想当