推荐阅读
Coreldraw赛尔曲线鼠绘漂亮的矢量蜘蛛女侠
效果图1.用贝赛尔曲线创建一些矢量元件,调整他们并组成人物整体.注意:元件的先后顺序.这些是经常用到的工具，相信大家都会用.我在这里就不多说了.2.调整并大致刻画人物整体，注意:不要忙于深入局图,先刻画整体为下一步深入刻画人物打下良好的基础.进入论坛一起讨论: http://www.missyuan.com/viewthread.php?tid=417853 3.全面丰富人物细节。 注意:细节要统一整体，细节不要跳跃出整体。
Photoshop合成冷色风格的水中房间图片合成教程
最终效果1、复制图层。2、置入水下图片素材。3、图层类型改为“叠加”，如想加深效果，则改为“正片叠底”，想减弱效果，则改为“柔光”，根据图片的效果自行调整。
Photoshop打造错位的方格文字特效
很多Photoshop特效都是偶然间不经意就发现了，所以说创意也不会是刻意就能想得出来的，不经意间可以做出许多意想不到的效果，这就是创意。今天笔者带给大家的是使用Photoshop制作错位的方格文字特效，希望可以对新手一些帮助。 先看一下效果： 1．首先运行Photoshop，新建一个600x400像素的RGB图像。如图1所示。 2．首先执行滤镜/渲染/云彩，将背景图层做出云彩的效果，如果对云彩的效果不满意可以通过反复按下Ctrl+F进行重复执行云彩滤镜的方法直到得到满意的效果。紧接着在云彩效果的基础上，执行滤镜/像素化/马赛克，将单元格大小设置为50方形，单击确定按钮。如图2所示。 3．按下图像/调整/亮度/对比度，将对比度提高40，这样更便于我们下面的操作进行。如图3所示。 4．进行到这里，我们将文件另存为一个，如“马赛克.PSD”文件，待会儿我们会用到它，可不要忘记存在什么地方。如图4所示。
AICC怎么用刻刀工具分开矩形
刻刀工具怎么把矩形或是别的对象分成二个实体，下面我们来详细介绍一下过程。1、刻刀工具是与剪刀工具与橡皮擦工具为一组，是用来分对象为二个实体。2、点击刻刀工具，中间的是刻刀画的线，这种是不能分开矩形的。3、刻刀要从矩形上面，划到下面来。中间是路径过程线。4、划好的结果就是分开二个对象。
最新发布
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或者其他工具会更好最终效果刚开始测量了盒子的宽高根据盒子的形状做了调整，用尺子量了突出多少，在多少厘米开始弯曲。尽量规范让产品不假功底不好，就先做了简单的明暗和贴上了标签纸。添加突出部分，这里的位置都是有经过测量的。