推荐阅读
Photoshop调出古典唯美效果图的外景婚片调色
案列对比图：左为原片，右为效果图1、[注：一直不厌其烦的讲复制背景层，不要在背景层上修改]。复制背景层，生成新的背景层，而后复制背景层生成图层1，修改混合模式为滤色，操作目的：提亮。2、创建“色相/饱和度”调整层，设置参数如下：3、创建“渐变映射”调整层，操作布草如下：
插画艺术网
本实例以造型优美的、抽象的花朵形象和渐变的、绚丽的花朵色彩，来表现插花艺术网页页面的设计主题。该设计效果强烈，点、线、面、色彩和图形的组合运用是构成网页的装饰要素。紫红色的运用为画面增添了浪漫气息。如图11-40所示，为本实例的完成效果。图11-40 本实例完成效果在本实例中所设计的内容与主题相符，体现插花这门艺术的优美与浪漫。协调的处理色彩与其他设计要素之间的相互关系，增强网页的信息和情感传递效果，使人们在浏览的时候产生共鸣。在制作过程中主要采用绘制路径、描边路径来绘制图像，使用“画笔”工具来修饰图像的颜色，更改图像的混合模式使两幅图像叠加起来，能得到更加丰富的图像效果。如图11-41所示，为本实例的制作流程。图11-41 本实例制作流程（1）启动Photoshop，执行“文件”→“新建”命令，参照图11-42所示对打开的“新建”对话框进行设置，创建一个名为“插画艺术网”的新文档。图11-42 设置“新建”对话框（2）单击“图层”调板底部的“创建新图层”按钮，新建“图层 1”，然后使用工具箱中的“矩形选框”工具，参照图11-43所示在视图中绘制一个矩形选区。
CSS兼容IE6,IE7,FIREFOX的一些收集
第一种，是CSS HACK的方法height:20px; /*For Firefox*/*height:25px; /*For IE7 & IE6*/_height:20px; /*For IE6*/注意顺序。这样也属于CSS HACK，不过没有上面这样简洁。#example { color: #333; } /* Moz */* html #example { color: #666; } /* IE6 */*+html #example { color: #999; } /* IE7 */第二种是使用IE专用的条件注释<!--其他浏览器 --><link rel="stylesheet" type="text/css" href="css.css" /><!--[if IE 7]><!-- 适合于IE7 --><link rel="stylesheet" type="text/css" href="ie7.css" /><![endif]--><!--[if lte IE 6]><!-- 适合于IE6及一下 --><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]-->第三种css filter的办法，以下为经典从国外网站翻译过来的。.新建一个css样式如下：#item { width: 200px; height: 200px; background: red;} 新建一个div,并使用前面定义的css的样式：
最新发布
Photoshop制作极简风格的2018海报设计教程
我们先来看看效果图：步骤1：打开PS，新建一个800*600的画布。给画布填充颜色：#f2f3f5。在画布中间建一个尺寸为710*452的矩形;填充颜色：#ffffff。步骤2：画一个48*300的矩形，填充渐变色：#58adfe~#98d6ff叫，角度60。添加投影：#0080ff，不透明度30%，角度90,距离8，大小12。然后将矩形旋转40度，放在画布右下角。步骤3：画一个154*154的正圆，填充渐变色：#ffa76d~#ff6796~#ff6695，角度60。用路径选择工具选中这个正圆后在它的中心画一个102*102的正圆。画这个圆的时候按住ALT键即可完成布尔运算的减法运算;添加投影：#ff0140，不透明度30%，角度90,距离6，大小16。将正圆放在画布左上角。
Photoshop制作时尚的明星抖音风格海报设计教程
最终效果一、人物图片的选择先思考下，抖音风这一类的设计能够运用在什么设计上，据我的分析该风格并不适合运用于所有的设计，大概可以运用在促销、激情、科技感、运动感强烈的设计中，那么我这里选择制作一位歌手的海报——李克勤。在百度中找到自己喜欢的歌手图片保存下来(照片尽量选一些背景不是很复杂的，这样我们就不用去抠图，因为复杂的背景会影响我们前面人物的视觉效果)。二、创建颜色误差1、打开PS，新建大小210mm*297mm，分辨率72。2、菜单——文件——置入嵌入对象(找到我们刚刚保存的图片)。这里我运用了九宫格原理进行构图，图层名字改为李克勤。
制作大气清爽的护肤品海报的PS海报设计教程
希望能给有基础的同学带来一些对场景、对合成的思路指导；也希望这篇教程能够给你们带来一些启发；你们认同是我继续下去的最大动力。最终效果1、构思。2、素材收集。3、画出草图。 4、拼背景。
Photoshop制作凹陷效果的LOGO设计教程
教程所需要的素材：LOGO刻印效果PS教程素材先看看效果图1、如何以正确的视角来创建一个对象步骤1：下载纸张纹理素材，并用Photoshop打开它。第2步：下载透视图像素材并用Photoshop打开。第3步：选择顶部菜单中的选择>全部，然后选择编辑>复制将选择复制到剪贴板。返回到背景文档，然后在顶部菜单中选择 编辑>粘贴将透视图像粘贴 到背景上。通过双击直接在图层面板中的图层名称并将其更改为“Perspective-image” 【透视图层】来重命名该图层 。
Emmet(Zen coding)HTML代码使用技巧七则
还记得Emmet(即Zen coding)吗?最棒的书写HTML代码的利器之一，能够帮助你快速书写HTML代码的工具。在今天这篇文章中，我们将要分享7个超酷的Emmet书写HTML的技巧，希望大家喜欢!1. 跳过Div第一个小技巧就是跳过div，Emment非常清楚你需要输入什么内容，你只需要输入class或者是id，Emmet会自动帮助你生成正确的div。如下：大家可以看到，不管你是否添加了div，Emmet都会自动生成需要div元素。含糊标签名称这个技巧属于implicit tag names特性，你不需要指定div或者li，Emmet会自动帮助你生成，如下： 2. 带有DOM导航的链式缩写
CSS3实例教程：详解Media Queries片段
Responsive设计在现代Web设计中可谓是越来越流行，但很同学们并未理解其真正的设计概念，往往把Responsive视为一种自适应布局。当然有很多同学也在尝试动写Responsive的案例，但如何取其断点左右纠结，如何设置哪几个断点？又从何入手？Responsive中的断点都依赖于CSS3的Media Queries来决断。曾在CSS3 Media Queries模板、使用em单位创建CSS3的Media Queries和iPads和iPones的Media Queries有过这方面的介绍。今天特意根据一些Responsive框架整理了一些常见的Media Queries片段，以供大家参考：在这里主要分成三类：移动端、PC端以及一些常见的响应式框架的Media Queries片段。 @media screen and (device-aspect-ratio: 40/71) {}或者：@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){} iPhone 5 In Portrait & Landscape @media only screenand (min-device-width : 320px)and (max-device-width : 568px){// CSS Style} iPhone 5 In Landscape @media only screenand (min-device-width : 320px)and (max-device-width : 568px)and (orientation : landscape){// CSS Style} iPhone 5 In Portrait @media only screenand (min-device-width : 320px)and (max-device-width : 568px)and (orientation : portrait){// CSS Style} iPone4 @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {} iPhone 3G @media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1){} iPhone /*Landscape*/@media screen and (max-device-width: 480px) {}/*Portrait*/@media screen and (max-device-width: 320px) {} Blackberry Torch @media screen and (max-device-width: 480px) {} Samsung S3 @media only screen and (-webkit-device-pixel-ratio: 2) {} Google Nexus 7 @media screen and (device-width: 600px) and (device-height: 905px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) {} Samsung Galaxy S3 @media only screen and (-webkit-device-pixel-ratio: 2) {} Samsung Galaxy S2 @media screen and (device-width: 320px) and (device-height: 533px) and (-webkit-device-pixel-ratio: 1.5) {} Galaxy Tab 10.1 /*Landscape*/@media (max-device-width: 1280px) and (orientation: landscape) {}/*Portrait*/@media (max-device-width: 800px) and (orientation: portrait) {} iPad In Portrait & Landscape @media only screenand (min-device-width : 768px)and (max-device-width : 1024px){// CSS Styles} iPad In Landscape @media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and (orientation : landscape){// CSS Styles} iPad In Portrait @media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and (orientation : portrait){// CSS Styles} Retina iPad In Portrait & Landscape @media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and (-webkit-min-device-pixel-ratio: 2){// CSS Styles} Retina iPad in landscape @media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and (orientation : landscape)and (-webkit-min-device-pixel-ratio: 2){// CSS Styles} Retina iPad in portrait @media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and (orientation : portrait)and (-webkit-min-device-pixel-ratio: 2){// CSS Styles} iPad Mini In Portrait & Landscape @media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and (-webkit-min-device-pixel-ratio: 1){// CSS Style} iPad Mini In Landscape @media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and (orientation : landscape)and (-webkit-min-device-pixel-ratio: 1){// CSS Style} iPad Mini In Portrait @media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and (orientation : portrait)and (-webkit-min-device-pixel-ratio: 1) {// CSS Style} 桌面端 320px @media screen and (max-width: 320px) {} 640px @media screen and (max-width: 640px) {} 800px @media screen and (max-width: 800px) {} 1024px @media screen and (max-width: 1024px) {} 1028px @media screen and (max-width: 1028px) {} 除了上面的常见Media Queries片段之外，下面的网站还提供了一些其他的片段： /*URL:http://html5boilerplate.com/*/ /* Smartphones (portrait and landscape) ----------- */@media only screenand (min-width : 320px)and (max-width : 480px) {/* Styles */}/* Smartphones (landscape) ----------- */@media only screenand (min-width : 321px) {/* Styles */}/* Smartphones (portrait) ----------- */@media only screenand (max-width : 320px) {/* Styles */}/* iPads (portrait and landscape) ----------- */@media only screenand (min-width : 768px)and (max-width : 1024px) {/* Styles */}/* iPads (landscape) ----------- */@media only screenand (min-width : 768px)and (max-width : 1024px)and (orientation : landscape) {/* Styles */}/* iPads (portrait) ----------- */@media only screenand (min-width : 768px)and (max-width : 1024px)and (orientation : portrait) {/* Styles */}/* Desktops and laptops ----------- */@media only screenand (min-width : 1224px) {/* Styles */}/* Large screens ----------- */@media only screenand (min-width : 1824px) {/* Styles */}/* iPhone 4 ----------- */@mediaonly screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {/* Styles */} Bootstrap的Media Queries /*URL:http://twitter.github.com/bootstrap*/ /* Large desktop */@media (min-width: 1200px) { ... } /* Portrait tablet to landscape and desktop */@media (min-width: 768px) and (max-width: 979px) { ... } /* Landscape phone to portrait tablet */@media (max-width: 767px) { ... } /* Landscape phones and down */@media (max-width: 480px) { ... } Foundation的Media Queries /*URL:http://foundation.zurb.com/*/ /* We use this media query to add styles to any device that supports media queries */@media only screen { }/* Used to alter styles for screens at least 768px wide. This is where the grid changes. */@media only screen and (min-width: 768px) {}/* Used to alter styles for screens at least 1280px wide. */@media only screen and (min-width: 1280px) {}/* Used to alter styles for screens at least 1440px wide. */@media only screen and (min-width: 1440px) {}/* Apply styles to screens in landscape orientation */@media only screen and (orientation: landscape) {}/* Apply styles to screens in portrait orientation */@media only screen and (orientation: portrait) {} Skeleton的Media Queries /*URL:http://www.getskeleton.com*/ /* Smaller than standard 960 (devices and browsers) */@media only screen and (max-width: 959px) {}/* Tablet Portrait size to standard 960 (devices and browsers) */@media only screen and (min-width: 768px) and (max-width: 959px) {}/* All Mobile Sizes (devices and browser) */@media only screen and (max-width: 767px) {}/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */@media only screen and (min-width: 480px) and (max-width: 767px) {}/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */@media only screen and (max-width: 479px) {} FRAMELESS的Media Queries /*URL:http://framelessgrid.com/*/@media screen and (max-width: 16.875em){}@media screen and (min-width: 32.5em) and (max-width: 37.4375em), screen and (min-width: 45em) and (max-width: 56.9375em), screen and (min-width: 77.5em) and (max-width: 102.4375em), screen and (min-width: 135em){}@media screen and (min-width: 102.5em) and (max-width: 117.9375em), screen and (min-width: 150em){}@media screen and (min-width: 15em){}@media screen and (min-width: 30em){}@media screen and (min-width: 37.5em){}@media screen and (min-width: 57em){}@media screen and (min-width: 57em) and (max-width: 117.9375em){}@media screen and (min-width: 118em){} Susy的Media Queries /*URL:http://susy.oddbird.net/*/@media (min-width: 29em) {}@media (min-width: 30em) and (max-width: 60em) {}@media (min-width: 119em) {}@media (min-width: 33.75em) and (max-width: 67.5em) {}@media (min-width: 33.75em) and (max-width: 67.5em) {} Less Framework 4 /*URL:http://lessframework.com/*/ @media only screen and (min-width: 768px) and (max-width: 991px) {}/* Mobile Layout: 320px (20em). */@media only screen and (max-width: 767px) {}/*Wide Mobile Layout: 480px (30em)*/@media only screen and (min-width: 480px) and (max-width: 767px) {} Golden Grid System的Media Queries /*URL:http://goldengridsystem.com/*//* @media screen and (min-width: 640px) */@media screen and (min-width: 40em) {}/* @media screen and (min-width: 720px) */@media screen and (min-width: 45em) {}/* @media screen and (min-width: 888px) */@media screen and (min-width: 55.5em) {}/* @media screen and (min-width: 984px) */@media screen and (min-width: 61.5em) {}/* @media screen and (min-width: 1200px) */@media screen and (min-width: 75em) {}/* @media screen and (min-width: 1392px) */@media screen and (min-width: 87em) {}/* @media screen and (min-width: 1680px) */@media screen and (min-width: 105em) {}/* @media screen and (min-width: 1872px) */@media screen and (min-width: 117em) {}/* @media screen and (min-width: 2080px) */@media screen and (min-width: 130em) {} Fluid baseline的Media Queries /*URL:http://fluidbaselinegrid.com/*//* MOBILE PORTRAIT */@media only screen and (min-width: 320px) {}/* MOBILE LANDSCAPE */@media only screen and (min-width: 480px) {}/* SMALL TABLET */@media only screen and (min-width: 600px) {}/* TABLET/NETBOOK */@media only screen and (min-width: 768px) {}/* LANDSCAPE TABLET/NETBOOK/LAPTOP */@media only screen and (min-width: 1024px) {}@media only screen and (min-width: 1280px) {}/* WIDESCREEN *//* Increased body size for legibility */@media only screen and (min-width: 1400px) {} 320andUP /*URL:http://stuffandnonsense.co.uk/projects/320andup*/@media only screen and (min-width: 480px) { /* 480 */}@media only screen and (min-width: 600px) { /* 600 */}@media only screen and (min-width: 768px) { /* 768*/}@media only screen and (min-width: 992px) { /* 992*/}@media only screen and (min-width: 1382px) { /* 1382 */ }@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { /* 2x*/} Gridless /* URL:http://thatcoolguy.github.com/gridless-boilerplate/ */@media only screen and (min-width: 480px) { /* Wide mobile (480px+) styles go here */}@media only screen and (min-width: 768px) { /* Tablets/netbooks (768px+) styles go here */}@media only screen and (min-width: 1024px) { /* Desktops (1024px+) styles go here */} TotanTHEMES /*URL:http://titanthemes.com/*//* Smaller than standard 960 (devices and browsers) */@media only screen and (max-width: 959px) {}/* Tablet Portrait size to standard 960 (devices and browsers) */@media only screen and (min-width: 768px) and (max-width: 989px) {}/* All Mobile Sizes (devices and browser) */@media only screen and (max-width: 767px) {}/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */@media only screen and (min-width: 480px) and (max-width: 767px) {}/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */@media only screen and (max-width: 479px) {} Responsive Grid System /*URL:http://responsive.gs/*/ @media (max-width: 480px) {} @media (min-width: 480px) and (max-width: 768px) {} @media (min-width: 768px) {} @media (min-width: 1024px) {} @media (min-width: 1200px) {} 本文搜集的是Media Queries在各种设备下的代码片段，希望这些片段能帮大家更好的理解Responsive断点的设置。如果大家有更好的方案，希望能在评论中分享。前提设置body的字体为100%。其具有一个简单的计算公式：100% = 16px = 1em = 14pt
Photoshop制作糖果饭盒包装盒设计过程,附简单的分解图
因为包装特殊，是高透明的饭盒。而且不是通版找不到合适的样机，只能自己做一个。附上简单的算是分解图，第一次做这种类型，做得有点不好。可以互相交流。个人习惯PS所以直接使用PS进行绘制。感觉AI或者其他工具会更好最终效果刚开始测量了盒子的宽高根据盒子的形状做了调整，用尺子量了突出多少，在多少厘米开始弯曲。尽量规范让产品不假功底不好，就先做了简单的明暗和贴上了标签纸。添加突出部分，这里的位置都是有经过测量的。