推荐阅读
Illustrator打造超漂亮镂空艺术字教程
本教程主要使用Illustrator打造超漂亮镂空艺术字教程，教程是我在网络上学习的时候看到的，感谢风风语者的原创分享。喜欢的朋友让我们一起来学习吧。先来看看最终的效果图吧:具体的制作步骤如下：
PS制作巧克力文字效果
这篇教程教飞特的朋友们用PS制作巧克力文字效果，教程难度中等偏上，制作出来的文字效果挺漂亮的，值得一提的是大家在制作时必须注意巧克力块的大小和文字大小的匹配。转发过来和飞特的朋友们一起分享学习了，先来看看效果图吧：：具体的制作步骤如下：第1步：设置远景色为#fece01，和背景颜色#e8661b，使用径向渐变，从中间往角落拉。第二步：将我们提供的牛皮纸加入到画布中，然后设置不透明度为：50%。点击图层面板下面的新建调整层，选择色相/饱和度。
在网页中显示可拖动月历
r使用本文提供的JavaScript脚本，配合Dreamweaver的层和行为的运用，可以在页面中显示可拖动的精美月历。具*作步骤如下：1、启动Dreamweaver MX，新建一个HTML文档，切换到代码视图，编写JavaScript脚本。(1)在HTML文档的< head>...< /head>插入下面的JavaScript脚本：< SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> //定义月历函数 function calendar() { var today = new Date(); //创建日期对象 year = today.getYear(); //读取年份 thisDay = today.getDate(); //读取当前日//创建每月天数数组 var monthDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); //如果是闰年，2月份的天数为29天 if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) monthDays[1] = 29; daysOfCurrentMonth = monthDays[today.getMonth()]; //从每月天数数组中读取当月的天数 firstDay = today;//复制日期对象 firstDay.setDate(1); //设置日期对象firstDay的日为1号 startDay = firstDay.getDay(); //确定当月第一天是星期几//定义周日和月份中文名数组 var dayNames = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六"); var monthNames = new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"); //创建日期对象 var newDate = new Date();//创建表格document.write("< TABLE BORDER='0' CELLSPACING='0' CELLPADDING='2' ALIGN='CENTER' BGCOLOR='#0080FF'>") document.write("< TR>< TD>< table border='0' cellspacing='1' cellpadding='2' bgcolor='#88FF99'>"); document.write("< TR>< th colspan='7' bgcolor='#C8E3FF'>");//显示当前日期和周日 document.writeln("< FONT STYLE='font-size:9pt;Color:#FF0000'>" + newDate.getYear() + "年" + monthNames[newDate.getMonth()] + " " + newDate.getDate() + "日 " + dayNames[newDate.getDay()] + "< /FONT>");//显示月历表头document.writeln("< /TH>< /TR>< TR>< TH BGCOLOR='#0080FF'>< FONT STYLE='font-size:9pt;Color:White'>日< /FONT>< /TH>");document.writeln("< th bgcolor='#0080FF'>< FONT STYLE='font-size:9pt;Color:White'>一< /FONT>< /TH>");document.writeln("< TH BGCOLOR='#0080FF'>< FONT STYLE='font-size:9pt;Color:White'>二< /FONT>< /TH>");document.writeln("< TH BGCOLOR='#0080FF'>< FONT STYLE='font-size:9pt;Color:White'>三< /FONT>< /TH>");document.writeln("< TH BGCOLOR='#0080FF'>< FONT STYLE='font-size:9pt;Color:White'>四< /FONT>< /TH>");document.writeln("< TH BGCOLOR='#0080FF'>< FONT STYLE='font-size:9pt;Color:White'>五< /FONT>< /TH>");document.writeln("< TH BGCOLOR='#0080FF'>< FONT STYLE='font-size:9pt;Color:White'>六< /FONT>< /TH>");document.writeln("< /TR>< TR>");
CDR如何修改椭圆与圆形的大小
第一步：用椭圆工具绘制一个椭圆，在属性栏上面可以看到椭圆的宽度与高度。第二步：选中椭圆对象，就可以在宽度与高度里面改成自已要的参数。在这里改成了30宽度与20高度。第三步：点击椭圆工具，按住Ctrl键不放，拖动工具绘制正圆。第四步：选中正圆，改正圆时要把锁定比率给选上，这样修改宽度与高度任何一个参数，都会一起变成一样的参数。在这里设置30MM 这里的30MM不是半径。
最新发布
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或者其他工具会更好最终效果刚开始测量了盒子的宽高根据盒子的形状做了调整，用尺子量了突出多少，在多少厘米开始弯曲。尽量规范让产品不假功底不好，就先做了简单的明暗和贴上了标签纸。添加突出部分，这里的位置都是有经过测量的。