返回课程

1.切片的使用

  有朋友做网页时曾经问过我,如何将一张图片分割成等分的几张,我试了几次,也咨询过其他的朋友,发现切片工具很多人不太会用,现在我把这个切片工具写出来,跟大家分享一下,如果写得不对,请大家别笑,因为我也不经常用呢~~~湖湖一下,先看教程,不好,就请跟我一块闪哦~~~~

  需要上传用到的网页素材:

PhotoShop

PhotoShop

PhotoShop

PhotoShop

PhotoShop

PhotoShop

PhotoShop

PhotoShop

PhotoShop

2.photoshop小技巧:将时间切片

  有一种概念把时间称作“第四维度”,日复一日年复一年,在这漫漫长河里,我们也只能记录短暂的一瞬间。至于说将时间与摄影相容,近来比较火的就是延时摄影了。不过延时之后的成果要不就是一段短片,或者是一张GIF图片。不过这些都不是今天的重点,我这次为你介绍的是一种比较另类的做法:将时间切片。

photoshop小技巧:将时间切片

  这张照片我曾经给美国国家地理签约摄影师麦克山下看过,他说曾看过类似的照片是拍摄的美国曼哈顿,不过切的更细,所以从远看真的就像从白天到夜晚一样。其实原理类似,如果你已经产生了好奇心,那就继续读下去吧!

  前期拍摄

001410OC-1

  对于这张照片,一共有9张切片,所以很自然的一定是要拍摄9张照片才可以(真啰嗦)。至于拍摄的时间点,季节不同选择时间也不一样,所以这个问题只能同学们根据实际情况自己定了。至于这张照片,我选取了晚上5点半到7点半的时间段,15分钟拍摄一张,还是挺耗时间的。

  对于拍摄时的注意事项,有几点需要说明:

  1.使用三脚架,最好有快门线,防抖防抖还是防抖

  2.测光方式要恒定,我是用了广域模式,就对着建筑物直接来。

  3.A档是一个很好的选择,并且固定好曝光补偿之后就不要再动了,这会为你的后期带来很多便利。

  4.白平衡推荐选日光,日落过程属于大范围的色温变化,固定住一个值就是为后期省事。

  从天亮拍到天黑,好怀念当年背着单反满北京溜达的时光啊……扯远了,我们继续看后期。

  后期处理

  How I Shoot都在告诉大家一个简单的后期方式,而这次想告诉大家的就是关于切片工具的使用方法。你以为这9等分是一点点裁出来的吗?那真是要把人累死了,PS里有简单的方法,我们一点点往下看。

  故事的开始,你一定要选中这所有的9张照片一起拖进PS中,在cameraraw插件里点击“全选”,一起来调整这些照片。如果你一定要问为什么?第一,这样效率很快;第二,如果是单张调整很可能曝光亮度不对,然后你就搞成了时间错乱的奇葩景象。

0014101105-2

  调整完毕,现在我以其中一张照片为例和你详细说明。你以为“剪裁工具”只有一个功能吗?在其上右键,你会发现一个叫做“切片工具”的选项,点击之。

  之后在照片上继续右键,不就能看见“划分切片”的选项,继续点击之。

  现在我们看到了传说中的切片划分工具,因为是9张照片,所以“垂直划分为9张”,之后点击确定,简单吧。下面3张图展示了详细的制作过程。

0014102514-3
0014103545-4
001410J96-5

  切了9次之后就是输出了,不过这个输出方式不走寻常路,你可能从来就没用到过。在“文件”里选择“存储为web所用格式”,之后你会发现一个崭新的世界。

  相关界面是这个样子的,你只要选择JPG存储格式就好了,品质自定,色彩空间请不要勾选sRGB,如果你想以后做打印输出的话那另当别论。

0014104b5-6

  点击存储,默认条件即可,然后我们一起来见证奇迹发生的时刻。

0014101K2-8

  在你保存的路径里,有没有发现你的照片尸体(哦不,照片切片)?它们已经切好了,现在只需要把相关切片组合即可

0014103I1-9

  以1张照片做底,第1张图的第1个切片,第2张的第2个切片,依次排列并以此类推,都做好之后就是完成品了,简单么?

0014101421-7
0014104126-10

  还是那句老话:相机在你手里,想法在你脑子里,带上伙伴出去拍吧。其实当年我也并没有什么好装备,只是看到别人做了觉得有意思也去拍了一次,希望同学们看了以后也能激发出自己的灵感。另,这个地方已经不让人们拍摄了,所以我不会告知大家具体地点。当然如果你是有心人,肯定能找到。

3.ps中切片工具怎么用

  最终效果

ps中切片工具怎么用

  步骤/方法:

  1、打开要分割的图片,点工具栏的切片工具,选择切片工具——划分切片(这里我们假定将一张原图平均分为12张小图)。

ps中切片工具怎么用

  2、将划分切片的水平划分为4,垂直划分为3,点好后出现12个等分的图片。

ps中切片工具怎么用

  3、将图片划分好后,我们点工具栏最下面的键计入IR状态下编辑图片。

ps中切片工具怎么用

  4、直接点文件,将优化结果储存为HTML格式。

ps中切片工具怎么用

  5、保存在电脑桌面或其它文件夹,会出现一个HTML格式的网页,我们打开另一个文件名为Images的文件包,里面就是我们刚才分割好的小图片。

ps中切片工具怎么用

  6、我们打开这些小图时会返现默认为索引颜色,这时选择菜单:图像 > 模式 > RGB颜色就可以对这些小图片进行处理了。

ps中切片工具怎么用
ps中切片工具怎么用

  以上是ps中切片工具怎么用的全部内容,希望对大家有所帮助,感谢您对2345软件大全的支持,更多软件教程请关注2345软件大全。

4.PS裁切工具怎样熟练使用

  PS裁切工具怎样熟练使用?Photoshop的裁切工具就如同我们用的裁纸刀,可以对我们的图像进行裁切,使图像文件的尺寸发生变化。这个工具的快捷键是字母C。虽然这个工具看起来不起眼,但是我们也不能忽视对它的学习和了解,今后在处理图片的过程中,还会经常用到它的!

PS裁切工具怎样熟练使用

  photoshop的裁切工具

  裁切工具的工具属性栏

  宽度、高度:可输入固定的数值,直接完成图像的裁切。

  分辨率:输入数值确定裁切后图像的分辨率,后面可选择分辨率的单位。

  前面的图像:点击可调出前面图像的裁切尺寸。

  清除:清除现有的裁切尺寸,以便重新输入。

PS裁切工具怎样熟练使用

  photoshop的裁切工具的工具属性栏

  实践练习:

  裁切工具很简单,而如何裁切出一张好的图片呢? 下面让我们通过几个实例来学习一下。

  例一: 先来学习如何使用PS中的裁切工具来对照片进行重新构图。

  原图:

PS裁切工具怎样熟练使用

  效果图:

PS裁切工具怎样熟练使用

  1.在原图上右键,保存到本地计算机

  2.在photoshop中打开这张图片。(文件/打开)

  3.在工具箱中选择裁切工具(快捷键C)

PS裁切工具怎样熟练使用

  4.在画面上拖动鼠标,把想保留的部分框出来。

PS裁切工具怎样熟练使用

  5.按回车键确定即可。

PS裁切工具怎样熟练使用

  例二 (分析如何构图):

  这是一张匆忙拍摄的海港照片。可惜水平方向上没有什么视觉中心,许多高光和琐碎的元素让画面杂乱无章,我们看不到重要的或说有趣的点在哪。

PS裁切工具怎样熟练使用

  我们大刀阔斧的把照片裁成了纵向的,目的是把视觉中心集中到有高高的桅杆的船上,同时背景是远处城市的灯光,近景和远景拉开距离又有所呼应。

PS裁切工具怎样熟练使用

  希望通过本文的讲解,大家对ps裁剪工具有所了解,以后能运用自如。

  以上是PS裁切工具怎样熟练使用的全部内容,希望对大家有所帮助,感谢您对2345软件大全的支持,更多软件教程请关注2345软件大全。

5.怎样用ps对图片进行无误差切割

  怎样才能将一张图片进行100%的无误差切割?今天就教大家怎么来切割图片!首先打开ps软件,双击空白处打开自己想要分割的图片素材。

怎样用ps对图片进行无误差切割

  接着用快捷键ctrl+r调出参考线。也可以点击窗口,在标尺前面找上勾。

怎样用ps对图片进行无误差切割

  找到标尺后,在标尺上面右键点击一下,然后在下拉菜单中在百分比前面打勾。

怎样用ps对图片进行无误差切割

  再菜单中找到窗口,点击下拉菜单中的新建参考线。我们是想要把这个图片分成4等分。横着分4分,竖着也把它分成4分。我们可以把这张图片想成100%,每份也就是25%。

怎样用ps对图片进行无误差切割

  知道了数,我们就可以把它按照这个数值进行分割。在弹出的窗口中我们选择水平输入25%,然后点击确定。

怎样用ps对图片进行无误差切割

  点击确定之后,我们再点击打开菜单中的视图---新建参考线。在弹出的对话框中选择垂直也是25%,点击确定。

怎样用ps对图片进行无误差切割
怎样用ps对图片进行无误差切割

  这样我们就把第一个参考线建好了,下面我们接着新建第二个参考线。第二个参考线的数值就不会和第一个一样的了。如果一样的话它们就把重叠在一起。第二个参考线的数值应当和第一个的一样,但是它要错开,也就是它是第一个数值的二倍50%。知道这个数。我们就点击水平,把它的数值设为50%。点击确定。

怎样用ps对图片进行无误差切割
怎样用ps对图片进行无误差切割

  点击确定之后,再点击菜单中的视图。新建参考线,在弹出的对话框中把垂直数值改也改为50。

怎样用ps对图片进行无误差切割
怎样用ps对图片进行无误差切割

  第二个参考线也制作完成了,下我们就接着制作第三个参考线。它的位置要比第二个多25%,也就是75%。确定了数值,下面就开始新建参考线。和上面的步骤一样。同样也是在窗口菜单中找到新建参考线。然后把它的水平数值改为75%,点击确定。

怎样用ps对图片进行无误差切割
怎样用ps对图片进行无误差切割

  接着在弹出的对话框中选择垂直,把它的位置数值改为75%。

怎样用ps对图片进行无误差切割
怎样用ps对图片进行无误差切割

  制作好之后,它就完全按我们的需要分割成了相同的大小。

怎样用ps对图片进行无误差切割

  这时候我们就可以随意的添加我们喜欢的效果。

怎样用ps对图片进行无误差切割

  以上是怎样用ps对图片进行无误差切割的全部内容,希望对大家有所帮助,感谢您对2345软件大全的支持,更多软件教程请关注2345软件大全。

6.PS如何批量调整矢量剪影图标尺寸

  轻松两步批量调整矢量剪影图标尺寸

PS如何批量调整矢量剪影图标尺寸

7.拯救UI设计师,一键切图免费下载!

  几乎没有一个设计师会不为切图而烦恼,因为有无数个png等着重现天日,工作量不可谓是不大!在这里, 阿里巴巴UI设计师为大家推荐了这个:自动切图工具「Slicy」Mac OS版(Layer Cake),真正解放设计师的神器!

  Layer Cake下载!微盘下载地址:http://vdisk.weibo.com/s/nrGbZ/1358147000

拯救UI设计师,一键切图免费下载!

  客户端UI设计和手机UI设计最烦的不是设计界面和设计图标,而是切图。Slicy就是来解救讨厌切图的设计师们。(暂无法生成安卓的.9.png)

  这款软件操作十分简单,只要将PSD拖进去Slicy的窗口,就能自动生成.jpg和.png等格式的切图文件,瞬间减少了很多工作量。

  当然,前提是,你得养成良好的PSD图层管理。

拯救UI设计师,一键切图免费下载!

  将上面的有4个五角星的界面拖进去Slicy窗口,瞬间生成4个png切图,点击save保存文件,可以选择同步PSD或者不同步

  (如果同步PSD,只要你的PSD做出修改,相应的切图PNG也会立刻修改生效,不需要再次保存PNG切图)

  图层命名说明(可参考下载文件里的Slicy示例)

拯救UI设计师,一键切图免费下载!

  图标切图:只需要把图片图层内容,放置在图层文件夹里,并命名:图标名称.icns就可以自动生成.icns格式的图标文件

拯救UI设计师,一键切图免费下载!

  把你想切图的部分,放在文件夹里,并命名切图名称.png(或者.jpg)。就能自动把想切图的部分生成。

拯救UI设计师,一键切图免费下载!

  假如你想切图的部分跟图层大小并不是一致的。(五角星是图层,红色遮罩是你想切出来的图片大小)

  你只要加上一层遮罩,并把遮罩的图层命名成@bounds。

  这样,切出来的图片大小,会跟@bounds图层的大小一直。

  注意:两个图层要一起放在一个图层文件夹里,并命名“切图名称.png”

拯救UI设计师,一键切图免费下载!

  除了普通的切图,Slicy还能自动把图层放大2倍,生成@2X的切图。

  @2X切图是用在iPhone Retina屏幕上的切图。命名方式见示例里的图层命名方式。

  只要你养成好的图层命名规则,这款软件可以方便快速生成切图,帮你省掉一半的工作时间。

  But,正式版是要花钱的哟~

8.界面设计填充真实图片神器Craft限免下载

  如果你使用Photoshop和Sketch做界面设计时,肯定会碰到一个问题,那就是需要填充很多真实的图片到界面里。这个过程非常浪费时间,有没有能节省时间的办法呢?当然是有的,那就是Craft。

  下载地址:

  Craft官网(输入邮箱,点击“get it free”):http://labs.invisionapp.com

  网盘链接:http://pan.baidu.com/s/1eQPDSS6

界面设计填充真实图片神器Craft限免下载

  Craft有什么牛逼的功能?

  因为米田用的Sketch为主,所以内容也是以此为主。Photoshop的功能是完全一致的,就不再重复演示了。

  文本自动填充

  简单一句话,能填充很多英文类字符串。包括姓名,大标题,文章,日期,电邮,城市,地址,国家,货币等等都可以。不过这块因为不是英文,还是显得有点鸡肋。

界面设计填充真实图片神器Craft限免下载

  那怎么办?

  还有记得那个标签栏有个”web”的选项么?点一下它,输入你认为可能能找到对应东西的网站。具体如下图,只要框选的内容就会被自动填充了。

  这个功能太实用了,泪流满面。终于不用来回切换程序了。

界面设计填充真实图片神器Craft限免下载

  具体动画演示,请看下图:

界面设计填充真实图片神器Craft限免下载

  图片自动填充

  我们可以从Dropbox的,电脑文件夹或网络导入真实不重复的照片,到设计的界面里。

  craft插件可以将真实图像快速添加到界面。并且提供足够多的添加选择方式。

  1)从Unsplash随机添加图像。

  2)从自己的文件夹,甚至是图像中抓取的图像。

  3)从任何网站添加图像,方式和文本填充方式一致。(注意图像使用版权)

界面设计填充真实图片神器Craft限免下载

  ▲ Cratf图像填充演示——Unsplash填充

界面设计填充真实图片神器Craft限免下载

  ▲ Cratf图像填充演示——从任一网页填充

  重复元素自动变化填充

  这是Craft插件最吸引人的地方,真正的方便和节省时间的功能。以往我们要复制元素,还要考虑份数和间距等等问题,最简单的方式也只是“Alt +拖动”,当然有部分插件能实现快速复制。

  但是Craft的复制功能的最大好处是,它会自动完成上述所有的功能外,还自动替换图像和文本。完全不需要手动处理,就能实现完全的高保真界面。 真的太酷了!

  下面就是见证奇迹的时刻。

界面设计填充真实图片神器Craft限免下载

  Craft的安装步骤:

  1)下载安装包,解压缩

  根据自己是Win或Mac系统点击对应的文件(如下图)。如果你用的是Sketch就点击Sketch,如果是Photoshop也是同理。当然两个都点击都可以。

界面设计填充真实图片神器Craft限免下载

  2)打开Sketch或Photoshop,看看是否安装成功

  打开Sketch,会发现出现新的面板,表示已经成功安装插件。

界面设计填充真实图片神器Craft限免下载

  打开Photoshop,在窗口>扩展功能>Duplicate/Photo/Type出现,表示已经成功安装插件。

界面设计填充真实图片神器Craft限免下载

  Craft的快捷键

  它最大的用处就是填充照片,文本虽然也可以填充,但是基本是英文的文本,用处不是特别大。

  神功能A:插入文件夹的图品(最牛逼的功能): Shift + Ctrl +1

  神功能B:随机从Unsplash插入图片(Unsplash是质量很好的壁纸库) Shift + Ctrl + 3

  神功能C:从Drapbox插入图片(因为国内被墙,用处没有那么大了) Shift + Ctrl + 2

9.制作简单网页小技巧

    一篇文章配上一个漂亮的版面,可以使人耳目一新或着是一种视觉享受。版面设计可以用photoshop软件制作,用PS制作网页版面可以很好的控制和调整网页框架的布局或色彩的协调搭配,也便于整体的修改和局部的细致刻画,使网页更具个性化。

  用PS制作网页前,应对制作的网页有个初步的构思,等把大的色块做好后,再调整色块间的明暗度、对比度、饱和度进行调整,而后再把小的插件放到网页上,先整体后局部的制作过程。由于百度空间受文字字数(4000字)或图片大小(500KB)的限制,所以在网页框架的制作中尽量的简化其结构,图片的格式也尽量的选择GIF格式。还要考虑空间文章区像素的大小,本人空间的文章区宽度是950像素,所以本人的网页框架图片一般设置为920像素。

  让我们先来了解一下版面布局的步骤:

  一.草案   新建页面就象一张白纸,没有任何表格,框架和约定俗成的东西,你可以尽可能的发挥你的想象力,将你想到的"景象"画上去(我们建议您用一张白纸和一支铅笔,当然用作图软件photoshop等也可以)。这属于创造阶段,不讲究细腻工整,不必考虑细节功能,只以粗陋的线条勾画出创意的轮廓即可。尽你的可能多画几张,最后选定一个满意的作为继续创作的脚本。

  二.粗略布局   在草案的基础上,将你确定需要放置的功能模块安排到页面上。(注:功能模块我们在"首页设计-引子"中提过,主要包含网站标志,主菜单,新闻,搜索,友情链接,广告条,邮件列表,计数器,版权信息等)。注意,这里我们必须遵循突出重点、平衡谐调的原则,将网站标志,主菜单等最重要的模块放在最显眼,最突出的位置,然后在考虑次要模块的排放。

  三.定案  将粗略布局精细化,具体化。(靠你的智慧和经验,旁敲侧击多方联想,才能作出具有创意的布局。)

  网页框架完成后,下一步就是做成适应网页框架的背景图,可以用PS将整图切割成4部分(图1)(这里你可以根据自己的构思,进行切割)背景图1为LOGO区域,(LOGO制作)背景图2为过渡区,也可以把1-2区域合并为一个区域,本人的意图是为了减少LOGO区域背景图的文件的大小,背景图3为文章区,这里应注意图片上下的衔接,因该区域的高度是根据文章内容而定的,背景图4为网页的底部。

   

Photoshop

图1

    用PS完成框架的制作及切割后,就可以用FrontPage2003搭建我们的网页了,该软件可以在OFFICE安装光盘里可以找到,你只要会word,相信这个也不难掌握。

  1、打开FrontPage 2003-新建-文件

  2、使用“插入表格”,插入1列4行表格(这里根据框架背景图数而定),

  3、选中表格,右键-表格属性,将单元格衬距、单元格间距、边框粗细设置为0,再选中“指定宽度”,选“像素”,把该值设为“920”(这里也是根据你的框架宽度的像素而定的)

  4、选上第一行,右键-单元格属性-选上“使用背景图”,打开你上传到空间里的图片,将背景图片的地址复制粘贴到地址栏里,再根据图片的高度,点选“指定高度”输入图片的高度(像素)值。

  5、以此类推,选中第二行,方法同上。

  6、在设置第三行(文章区)时,可以不设定高度值,其高度是有文章内容而定的。

  详细方法看图2

   

Photoshop

图2

    完成总体框架的设定后,就该对每个单元格进行细部编辑了。第一行的LOGO区,有“文章索引”、“常用查询”等各项的超级连接的编辑,处于对版面的美观,文字使用的图片形式,加入连接就不能用文字类型的超级连接,只能放入图片制作超级连接,为不影响版面效果,这里使用的是“透明的图片”,这在PS中很容易做到。

    (一)LOGO区的编辑

  1.在第一行里右键-单元格属性-设置“水平对齐方式”为“居中”,“垂直对齐方式”为“顶部对齐”,插入4列1行单元格。

  2、调整总的宽度,与底图设置相一致,选中各列,设置“平均分布各列”。

  3、在各列复制粘贴上“透明的图片”,使用”菜单上的“格式”-“段落”-“段落前间距”,调整“透明的图片”高度,与图片上文字相吻合。

  4、调整吻合后,选中各“透明的图片”-右键-“超连接...”,在“地址”栏里加入连接。这样就完成了LOGO去的编辑。

  5、第二行是过渡区,不用考虑。

  (二)文章区的编辑

  应该说这部分的制作比较费事,在这个区域中分为文章区和左侧文章连接区,这样可以使版面不至于太单调,即丰富了页面的内容,又使版面更美观。下面是具体的制作方法:

  1、设置该单元格为“居中”“顶部对齐”,然后插入5列1行单元格,根据背景图,可以手动调整各列的宽度,(见图3)

   

Photoshop

图3

    2、将文章区的对齐方式分别设置为“默认”、“顶部对齐”,可以使用“格式”-“段落”调整文字的边距。

  3、左侧的文章连接区的对齐方式设置为“居中”“顶部对齐”,插入若干行单元格,将连接的文章放置该去。

10.ps实用教程:制作漂亮的网站导航条

  对于做网站的朋友来说,在设计网页时网站的导航条是非常重要的,能够决定整个网站的视觉效果,那么到底怎么用PS制作漂亮的网站导航条呢?和做其他设计一样,首先我们需要在大脑中构思想要的效果,再把构思出的效果图分层,最终找到用PS制作漂亮的网站导航条的方法。

  最终效果:

ps实用教程:制作漂亮的网站导航条

  1.新建一个600*150的文件,背景填充黑色。选择“圆角矩形工具”画一个同样填充黑色的圆角矩形,

  选择“添加图层样式—斜面浮雕—描边”:

ps实用教程:制作漂亮的网站导航条

  得到如下效果:

ps实用教程:制作漂亮的网站导航条

  2.制作高光区。新建图层,选择钢笔工具,绘出一个方框如下:

ps实用教程:制作漂亮的网站导航条

  右键单击钢笔路径转换成选取并填充白色。

ps实用教程:制作漂亮的网站导航条

  黑色的圆角矩形框载入选区--ctrl+左击图层,选择白色图层,反选—删除,删除多余的部分。

ps实用教程:制作漂亮的网站导航条

  添加由(#4a4a49)到(#d5d5d5)的渐变叠加:

ps实用教程:制作漂亮的网站导航条

  得到如下效果:

ps实用教程:制作漂亮的网站导航条

  3.输入导航文字颜色分别为:#ffffff & #d9ff3f;

ps实用教程:制作漂亮的网站导航条

  4.输入“-----”旋转90°作分割线,添加白色正方形小方框;

ps实用教程:制作漂亮的网站导航条

  5.软键盘输入“¬“;完成。

ps实用教程:制作漂亮的网站导航条

  相信今天的教程能够帮助很多想要往网站设计方向发展的朋友,也希望大家可以把自己在学习PS过程中的心得分享出来,让更多的朋友受益!

  以上是ps实用教程:制作漂亮的网站导航条的全部内容,希望对大家有所帮助,感谢您对2345软件大全的支持,更多软件教程请关注2345软件大全。

11.Photoshop CC 与前端不得不说的一点事

  Photoshop 是视觉设计师最强有力的武器之一,其实 Photoshop 也为前端开发同学带来很多惊喜。

  特别是从 Photoshop CC 版本开始,它变得越来越有趣。今天笔者就其中几个新特性给大家介绍一下。如果您也有更多新的发现,请在下方留言与大家进行讨论。

  自动切图(含WebP、SVG格式):

  前端开发人员经常需要将很多图层切出成独立的图片。有了自动切图功能,无需花更多时间来切图了。只需在图层名后添加相应格式后缀(如.png),即可自动输出所需格式的图片。

  请保持菜单“编辑->首选项->增效工具”中的“生成器”为启用状态;

  依次点击菜单“文件->生成->图像资源”,确认该菜单项已被勾选;

Photoshop CC 与前端不得不说的一点事
Photoshop CC 与前端不得不说的一点事

  试着修改某个图层命名(如 iTunes.png),然后检查当前 psd 文件所在目录下的“文件名-assets” 的目录,打开此目录,发现 iTunes.png 已经躺在里面了。

Photoshop CC 与前端不得不说的一点事

  常用技巧:

Photoshop CC 与前端不得不说的一点事

  @2x Retina 图片的输出,在图层前添加 200% 即可,如 200% logo@2x.png ;

  开启 WebP、SVG 格式的自动输出: 新建 generator.json 文件,内容如下:

  { "generator-assets": { "svg-enabled": true, "webp-enabled": true }}

  将此配置文件拷贝至: Windows: (Win+R后输入 %USERPROFILE% )目录下,如 C:Usersxxx Mac OS: $HOME 如“Macintosh HD>Users>xxx” 目录下 WebP 输出暂只支持 Mac OS。

  复制 CSS

  Photoshop CC 终于推出了“复制CSS” 功能。它能让开发人员快速获取形状的 CSS 代码。其实不少设计师也很想学习 CSS,有了这个功能,可以让这些爱学习的设计师熟悉 CSS 代码与图形的对应关系;

Photoshop CC 与前端不得不说的一点事

  右击图层面板上的图层,选择“复制 CSS”,或点击菜单“图层->复制 CSS”;

  多个图层的批量获取,请选择多个图层,执行 Ctrl+G,将所选图层转为图层组。然后在该组上右击,选择“复制 CSS”,即可批量获取 CSS 代码。

  智能对象暂不支持“复制 CSS”功能,您可以栅格化该图层再来使用。

  当前的版本的此功能,包含了很多冗余信息和不太友好的写法,可能不是大家真正需要的。于是 ISUX 前端团队改进了这个功能,您可以下载“PhotoshopCopyCSS”来增强 Photoshop CC 自带的“复制 CSS”功能,提升 CSS 代码的真正采用率;目前的优化有:

  * 自动识别 CSS Sprite 图片,获取 background-position 信息;

  * 自动识别是否图标;

  * 优化 CSS3 渐变、文字、边框、阴影等 CSS 代码;

  * 优化 RGB 颜色值成 十六进制颜色;

  * 去除冗余 CSS 属性,如 position, z-index, left, top 等。

  您也可以反馈更好的建议,让这个功能真正为大家所用。

  图层管理

  前端开发同学接手的 psd 文档,往往有大量图层,我们需要对其进行整理。例如删除空白、锁定、文本等图层。我们还可以通过图层类型、名称、效果、属性等条件进行快速定位图层。

Photoshop CC 与前端不得不说的一点事
Photoshop CC 与前端不得不说的一点事
Photoshop CC 与前端不得不说的一点事
Photoshop CC 与前端不得不说的一点事

  使用此功能可以很方便定位到当前选定图层,非常适合含有大量图层的 psd 文档。

  另外隔离图层也是个很不错的功能。开启隔离图层功能之后,我们可以通过移动选择工具,点选画布上的内容,找出我们需要的图层将其整理成一个独立的 psd 文件。

  WebP 插件

  WebP 是 Google 为减少数据量、加速网络传输的目的而开发的图片格式。特别适合移动端图片的传输。大大节省带宽,目前只有 Google Chrome 浏览器对其原生支持。

  Photoshop CC 的 Mac OS 版自带输出 WebP 功能。Windows 下您可以下载此插件来输出 WebP 格式。安装后,可以在 Photoshop 菜单“文件->另存为” 对话框中选择“WebP格式图片”。

  WebP for Photoshop v0.5b5, 16 December 2013 Mac | Win

  动作条件

  Photoshop CC 新增了动作条件,可以根据不同条件执行命令或其他动作。

Photoshop CC 与前端不得不说的一点事

  智能参考线/使用图层颜色

  这两个功能并不是 Photoshop CC 的新功能。为什么要在这里说呢,因为它能辅助我们一秒居中对齐、一秒贴边,这个非常实用。另外也建议设计师使用图层颜色来标出改动位置,这样前端开发同学便能快速定位图层。

Photoshop CC 与前端不得不说的一点事
Photoshop CC 与前端不得不说的一点事

  以上是Photoshop CC 与前端不得不说的一点事的全部内容,希望对大家有所帮助,感谢您对2345软件大全的支持,更多软件教程请关注2345软件大全。

12.PS+DW轻松完成网页制作!

  看那密密麻麻的网页导航,想来制作网页也是一件很难的事情,那怎么让制作网页变得简单起来呢?

  只需要两个软件:PS和Dreamweaver!

  效果图:

PS+DW轻松完成网页制作!

  我们需要先制作背景图片。也就是网页背景那块蓝色的部分。我们需要单独做出来。

  新建一个1920px*400px的文件

PS+DW轻松完成网页制作!

  我们拉一个一个蓝色(#506dbb)到白色的一个渐变

PS+DW轻松完成网页制作!

  效果图

PS+DW轻松完成网页制作!

  然后我们保存这张图片为gif格式

  这时候我们新建一个

  1000*800的文件

  我们把网页效果图制作出来。这里都是用到ps制作的。没有写任何代码。这个过程我就不讲了

  大家制作好网页效果图完成的时候一定要注意把网页背景图层删掉,保持透明

PS+DW轻松完成网页制作!

  下一步我们使用切片工具。把页面进行切片。如下图所示

  注意每一个链接都要切片一下。切片工具和矩形选区工具一样,拉一下就是一个切片

  为了区分我这里加了背景。我们一会一定要记得去掉

PS+DW轻松完成网页制作!

  我们再使用切片选择工具选择单个切片。然后右键

PS+DW轻松完成网页制作!

  我们再逐个为切片添加链接

  注意。我们上面的加的黑色背景一定要记得去掉

PS+DW轻松完成网页制作!

  我们现在保存为web所用格式

PS+DW轻松完成网页制作!

  我们把这里选择png—8

PS+DW轻松完成网页制作!

  保存

PS+DW轻松完成网页制作!

  保存完成后

  效果图

PS+DW轻松完成网页制作!

  保存完成后。会生成一个目录和一个html文件。我们用浏览器打开这个html文件可以看看效果。由于我们保存时选择的是png格式的所以看到的效果不美观,且网页靠左边。我们要做的就是让网页有一个背景就是我们刚刚制作的蓝色背景。且页面居中

  为了方便,这里我们使用 Dreamweaver。这个软件破解版和安装教程问度娘要这里就不多说。

  打开 Dreamweaver界面

  我们新建一个站点

PS+DW轻松完成网页制作!

  我们先要给网页居中。

  我们用Dreamweaver打开ps生成的html文件

  进入Dreamweaver的设计视图。注意看

PS+DW轻松完成网页制作!

  我们用鼠标点一下最外边的这根线。(把鼠标放在四个角上单击一下就可以选中)

  选中

PS+DW轻松完成网页制作!

  然后把下边的属性设置为居中。注意看

PS+DW轻松完成网页制作!

  这样网页就居中了。

  我们再添加一个背景

  我们先把鼠标在旁边空白地方单击一下,然后点击下面的页面属性

PS+DW轻松完成网页制作!

  把背景图片设置为我们刚刚制作的背景图。重复选择no开头的那个。其他的不用管。

PS+DW轻松完成网页制作!

  然后我们按ctrl+s保存好网页。然后即可使用浏览器预览效果了,

PS+DW轻松完成网页制作!

  ps制作网页就是这么简单

PS+DW轻松完成网页制作!

13.设计师大全!免费psd网站模板下载!

  对于一名设计师来说,经常要设计和制作网站,如果有现成的 PSD 网页设计模板可以使用的话,就可以快速的制作出精美的网站作品。所以,这篇文章专门整理了20款免费的 PSD 网页模板设计,你可以免费下载这些网站布局模板进行编辑和修改,也可以通过这些免费的网页 PSD 模板获取创作灵感。

  提示:国外blazrobar网站的资源都是顶尖的,可能出于数据指标考虑,现在需要注册了,当然很方便!随便录入个@邮箱即可海量下载!

    Showcase – A Free Website PSD Template

设计师大全!免费psd网站模板下载!

  ———————————————————————————————————————————————————

  Business Website Template Design

设计师大全!免费psd网站模板下载!

  ———————————————————————————————————————————————————

  “Polo360″ Portfolio Site PSD Template

“设计师大全!免费psd网站模板下载!

  ———————————————————————————————————————————————————

  Free PSD Website Layout

设计师大全!免费psd网站模板下载!

  ———————————————————————————————————————————————————

  Wonder Theme – A free PSD Site Design

设计师大全!免费psd网站模板下载!

  ———————————————————————————————————————————————————

  Wordy – A Free website PSD download

设计师大全!免费psd网站模板下载!

  ———————————————————————————————————————————————————

  Fashion Free PSD Website Template

设计师大全!免费psd网站模板下载!

  ———————————————————————————————————————————————————

  Car Studio PSD Template

设计师大全!免费psd网站模板下载!

  ———————————————————————————————————————————————————

  Orange Blog Free PSD Template

设计师大全!免费psd网站模板下载!

  ———————————————————————————————————————————————————

  Gridly – Free PSD Blog Website

设计师大全!免费psd网站模板下载!

  ———————————————————————————————————————————————————

  Free Web Template PSD

设计师大全!免费psd网站模板下载!

  ———————————————————————————————————————————————————

  Dealers theme home page freebie (psd)

设计师大全!免费psd网站模板下载!

  ———————————————————————————————————————————————————

  Free Minimal Website Design PSD

设计师大全!免费psd网站模板下载!

  ———————————————————————————————————————————————————

  Theme. A free website (PSD)

设计师大全!免费psd网站模板下载!

  ———————————————————————————————————————————————————

  Woodsman Blog Layout (PSD)

设计师大全!免费psd网站模板下载!

  ———————————————————————————————————————————————————

  iPhone App Sales Web design

设计师大全!免费psd网站模板下载!

  ———————————————————————————————————————————————————

  Flux – Minimal Blog Design PSD Template

设计师大全!免费psd网站模板下载!

  ———————————————————————————————————————————————————

  Minimalist Website layout

设计师大全!免费psd网站模板下载!

  ———————————————————————————————————————————————————

  Free IT Technologies Website Template

设计师大全!免费psd网站模板下载!

  ———————————————————————————————————————————————————

  Free Website Template for Web Design Studio

设计师大全!免费psd网站模板下载!

14.PS参考线辅助插件GUIDEGUIDE免费下载及使用说明

  大家都知道,每次在PS里面拉参考线是一件很痛苦的事情,特别是要按照规定的宽度创建Grid的时候,而这回,Cameron Mcefee提供了一个插件“GuideGuide”,如其名,的确是非常方便的一款创建参考线的插件。

  今天为大家介绍一款非常实用的PS小插件GuideGuide,它提供了一个非常便捷的方式生成像素级别的辅助线(栏,行,中线……)

PS参考线辅助插件GUIDEGUIDE免费下载及使用说明

  想像一下在PS里面创建好一组多栏目的辅助线:页面多宽,分2栏目还是3栏,分栏里面又有多少个分栏……数学不好的同学估计手心都开始冒汗了。确实,在PS里面创建网格是个非常痛苦的事情,不少设计同学都是大概估算一下宽高来拉辅助线;或者画一个矢量图形,然后复制移动来分列。如果总的宽度有了变化之后,又将他们整体拉宽来重新分列。没耐心的人估计已经开始喊:“我是设计师,不是数学家”,有耐心的人会重新算过一遍之后再来,还有公式如下:

  (页面宽度 – (间隙宽度 x (分栏数 – 1) ))÷ 分栏数 = 栏目宽

  看起来是不是有点想暴走?设计个页面还要搞这么复杂的东西。

  实用的小工具GuideGuide来了

  为啥要把时间花在数学上,而不是省心一点,留出多一点时间来将设计做得更好呢?只要输入一些数字,GuideGuide就会利用PS里面的辅助线自动的在你的文档中划分好网格。当你用了之后就会由衷的觉得:很好很强大。而且,它真正的强大之处在于:支持选框工具–如果你的文档中有选框的话,它可以在选区内生成对应的辅助线。

  分栏与分列

  页面需要分栏和等比间隙?GuideGuide轻松搞定

PS参考线辅助插件GUIDEGUIDE免费下载及使用说明

  找到中点

  GuideGuide让你找到对象的中点变得易如反掌,只要画一个选区或者在图层面板(ctrl + 鼠标左键)创建一个选区,然后点击中点按钮,就可以立即创

  建中点线。

PS参考线辅助插件GUIDEGUIDE免费下载及使用说明

  然后将此列中的其他元素根据需要来对齐

  存储常用的划分为选项

  如果你经常用同一种网格划分方式,可以存储为选项方便以后随时调用

  发挥你的创造力

  GuideGuide有分栏,有边距,有中点…… 发挥你的想象力它可以做的更多

  划分导航

  当你要将一定宽度的导航划分为N等分的分栏的时候,是不是又要计算宽度了?现在不用烦恼了,用GuideGuide吧

PS参考线辅助插件GUIDEGUIDE免费下载及使用说明

  1.用选区工具画一个你导航宽度的选区

  2.输入你导航的分栏数以及他们之间的间距

  等边距矩形绘制

  当你想绘制一个与你当前元素等边距的矩形,是不是又要计算了?

  1.在图层面板(ctrl + 鼠标左键)创建选区

  2.在边距栏输入一个负数,然后点击图标,GuideGuide会自动输入四边等距的指数,然后回车创建辅助线

  3.根据新创建的辅助线绘制四边等距离的矩形

PS参考线辅助插件GUIDEGUIDE免费下载及使用说明

  基准线网格绘制

  利用GuideGuide便捷的行高设置,轻松创建整页的横向对齐基准线

  1.输入你想要的行高

  2.将你页面中的元素相应的对齐

PS参考线辅助插件GUIDEGUIDE免费下载及使用说明

  剩余像素分配

  在分栏的时候不是永远都能完美的等分,如果你要在一个10px宽度内分3栏,那么多余的像素怎么办?设置里面的剩余像素分配设置决定将多余的像素分配到哪里,默认是“右下角”

PS参考线辅助插件GUIDEGUIDE免费下载及使用说明

15.网站版面App设计必备9组图标免费下载

  大家分享9组精美图标下载 为你的App、网站、banner设计添置新的图标,是你加班学习的好帮手,星球大战图标一定不要错过!

  下载链接:http://pan.baidu.com/s/1kVPa3LP

网站版面App设计必备9组图标免费下载
网站版面App设计必备9组图标免费下载
网站版面App设计必备9组图标免费下载
网站版面App设计必备9组图标免费下载


  • 扫一扫 扫二维码继续学习