Pencil - Scoopz

Animate SVG Icons with CSS3 & jQuery

<div dir="ltr" style="text-align: left;" trbidi="on"><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrI_VY0K3YF_ilnrgMcn2LC_KqyD1VgQLfiEuIoVq_XmjxpGS3ARNm2dUSTcrPvP413CV84XHL7ILjpkvKfJSaAl4u8dHqr8gS51O3DoNZQBy1PVKtI2C-86dZbktvbgtVHM5bXMeT_9hA/s1600/SVG_animation-800x400.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrI_VY0K3YF_ilnrgMcn2LC_KqyD1VgQLfiEuIoVq_XmjxpGS3ARNm2dUSTcrPvP413CV84XHL7ILjpkvKfJSaAl4u8dHqr8gS51O3DoNZQBy1PVKtI2C-86dZbktvbgtVHM5bXMeT_9hA/s640/SVG_animation-800x400.jpg" width="640" /></a></div>Recently, there’s been a lot of buzz throughout the web design and development community on using SVG for icons. Due to a number of limitations and inconveniences, using raster-based images for your icons, has become an increasingly painful and restricting endevour. There are a number of reasons why a raster based image for the purposes icons, have become obsolete. I covered this and explored a number of viable solutions in this article <a href="http://www.pencilscoop.com/2013/11/svg-and-icon-fonts-the-future-of-iconography/" title="SVG and Icon Fonts: The Future Of Iconography">here</a>, which is worth reading if you are mostly unfamiliar with the use of SVG in web development. I explored a number of different methods of implementing icons including, pure CSS, icon fonts, and SVG. However a lot of people are still unfamiliar with SVG styling and implementation, as there isn’t yet a widely-accepted definitive way that works well. Which brings us to this article. In this tutorial I will be showing you how to create, implement, animate and style SVG icons on the web using simple markup. I’m assuming, if you’ve made it this far, that you have at minimal, a basic understanding of CSS, HTML, a little JavaScript and Adobe Illustrator. If you are completely unfamiliar with SVG, I would recommend reading <a href="http://css-tricks.com/using-svg/">this article</a> on SVG basics over at CSS-Tricks prior to going any further. Let’s get started. <a name='more'></a> <hr class="separator" /><hr class="space" /><div style="text-align: center;"><a class="btn sunset small" href="http://pencilscoop.com/demos/svg/rocket/index.html" target="_blank">Full Demo</a> <a class="btn sunset small" href="http://pencilscoop.com/demos/svg/rocket_animation.zip" target="_blank">Download Source</a> <a class="btn sunset small" href="http://pencilscoop.com/demos/svg/CSS%20Only%20Version/index.html" target="_blank">CSS Only Demo</a></div><h3>Prepping SVG</h3>For the purposes of this article, we are going to be using a rocket icon (originally designed by <a href="http://dribbble.com/shots/1062569-Flat-icons-PSD-2?list=users">Pierre Borodin</a>), although I slightly modified the icon and converted it to SVG. You can download the Adobe Illustrator file <a href="http://pencilscoop.com/demos/svg/rocket/Icon/rocket_icon.ai">here</a>. On a side note, if you prefer to work with your own icon, feel free to do so, the basic methods will remain the same. Open up the file in Illustrator, click “Save As” and select “.SVG“. Once you click save, the “SVG Save Options” dialog will pop-up. You can then click on “SVG Code” which will open the XML code for the file in a text editor. <img alt="save_svg_file" class="alignnone size-full wp-image-10076" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/11/save_svg_file.jpg" /> This is a useful feature, however all the CSS that is used to style the SVG is embedded in “inline” format within the various paths. This is a problem, as we won’t be able to do any custom styling or animation. <img alt="svg_css_problem" class="alignnone wp-image-10077" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/11/svg_css_problem.jpg" style="border: 1px solid black;" /> Separating all that CSS manually would be a pain, so we are going separate it automatically later. For now, go ahead and save the SVG using all the default save options. To seperate all the CSS so it’s not inline we’ll use a free online <a href="http://petercollingridge.appspot.com/svg_optimiser">SVG Optimiser</a> tool by Peter Collingridge. Upload the SVG you saved from Illustrator, check the “convert styles to CSS” box and download the new SVG file. Open the file up in a text editor or whatever program you use to code. <img alt="svg_CSS_seperated" class="alignnone wp-image-10078" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/11/svg_CSS_seperated.jpg" style="border: 1px solid black;" /> You’ll notice that all the CSS styling is now separated from all SVG-path markup, which is good. You’ll also notice that there are a number of class’s and ID’s attached within the markup, similar to traditional HTML markup. Additionally you should see some “<g></g>” elements. The classes and IDs work pretty much the same as HTML and can be manipulated in CSS. In SVG <g> is a grouping element and works in a similar way as a”div” would in HTML. It’s worth noting that when you do your designing in Illustrator, a layer will be represented as a group (<g>) in SVG markup, which is all the more reason to name and organise your layering appropriately. <img alt="illustrator_layers" class="alignnone size-full wp-image-10079" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/11/illustrator_layers.jpg" /> <hr class="separator" /><h3>Cleaning Up SVG for Web Use</h3>In order to use SVG’s to to their full potential, we need to clean a few things up. There are two things we need to do. Firstly – Illustrator’s back-end leaves all the grouping ID’s with arbitrary characters in their name. Secondly, the SVG optimizer we used, adds generic styling classes such as “style1, style2, style 3“..etc. We need to go through the file and rename all the styles and IDs appropriately so we can work on them later. Here I have cleaned up the SVG markup, which looks like this: </div><div style="text-align: left;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="307px" height="283px" viewBox="0 0 307 283" enable-background="new 0 0 307 283" xml:space="preserve"> <g class="rocket_wrap"> <circle cx="147.5" cy="138.6" r="105.5" class="icon_circle"/> <g class="rocket_inner"> <g class="fire" id="fireMiddle"> <path class="fire_path" d="M148.891,179.906c3.928,0,7.111,3.176,7.111,7.094 c0,7.78-7.111,16-7.111,16s-7.111-8.349-7.111-16C141.78,183.082,144.963,179.906,148.891,179.906z"/> </g> <g class="fire" id="fireRight"> <path class="fire_path" d="M154.063,181.092c3.577-1.624,7.788-0.048,9.408,3.52 c3.216,7.084,0.139,17.508,0.139,17.508s-9.927-4.662-13.09-11.63C148.9,186.923,150.487,182.715,154.063,181.092z"/> </g> <g class="fire" id="fireLeft"> <path class="fire_path" d="M143.392,182.519c3.25,2.207,4.098,6.623,1.896,9.864 c-4.372,6.436-14.873,9.238-14.873,9.238s-1.191-10.902,3.108-17.23C135.725,181.149,140.143,180.312,143.392,182.519z"/> </g> <g class="fire" id="fireSmallLeft"> <path class="fire_path" d="M143.193 187.531c2.226 0.4 3.7 2.6 3.2 4.8 c-0.875 4.407-5.829 8.264-5.829 8.264s-3.09-5.53-2.229-9.865C138.807 188.5 141 187.1 143.2 187.531z"/> </g> <g class="fire" id="fireSmallRight"> <path class="fire_path" d="M152.089 188.599c2.043-0.985 4.496-0.132 5.5 1.9 c1.952 4 0.3 10.1 0.3 10.107s-5.795-2.56-7.713-6.541C149.186 192 150 189.6 152.1 188.599z"/> </g> <path class="rocket_bottom" d="M157.069 171.31h-3.292c-1.562-0.048-3.178-0.076-4.846-0.076 s-3.284 0.028-4.846 0.076h-3.292c-7.277-7.938-12.371-26.182-12.371-47.434c0-28.54 9.182-51.676 20.508-51.676 c11.327 0 20.5 23.1 20.5 51.676C169.44 145.1 164.3 163.4 157.1 171.31z"/> <g id="right_wing_wrap"> <path class="wing_base" d="M166.678 127.161c0 0 17.7 3.3 12.9 48.099l-18.06-14.05 L166.678 127.161z"/> <path class="wing_shadow" d="M158.225 140.336c10.481-5.584 22.7 22.2 21.4 34.9 l-18.06-14.05C161.542 161.2 156.1 144.3 158.2 140.336z"/> </g> <g id="left_wing_wrap"> <path class="wing_base" d="M135.131 161.21l-18.06 14.1 c-4.805-44.793 12.924-48.099 12.924-48.099L135.131 161.21z"/> <path class="wing_shadow" d="M135.131 161.21l-18.06 14.1 c-1.367-12.746 10.896-40.509 21.377-34.924C140.614 144.3 135.1 161.2 135.1 161.21z"/> </g> <g id="rocket_body_wrap"> <path class="rocket_base" d="M162.728 167.358c-3.778-0.623-8.573-0.996-13.796-0.996 s-10.018 0.373-13.795 0.996c-5.033-10.186-8.257-25.808-8.257-43.338c0-30.688 9.873-55.566 22.052-55.566 s22.053 24.9 22.1 55.566C170.984 141.6 167.8 157.2 162.7 167.358z" /> <path class="rocket_shadow" d="M145.464 166.417c19.578-40.575 7.26-85.229 4.112-98.067 c11.88 0.9 21.4 25.4 21.4 55.525c0 17.529-3.225 33.152-8.257 43.337c0 0-3.786-0.472-8.069-0.697 S145.464 166.4 145.5 166.417z"/> </g> <g id="large_window_wrap"> <radialgradient id="SVGID_2_" cx="148.9" cy="112.5" r="15.2" fx="139.4853" fy="112.5239" gradientunits="userSpaceOnUse"> <stop offset="0" class="window_grandient"/> <stop offset="0.5868" class="window_grandient"/> <stop offset="0.6834" class="window_grandient"/> <stop offset="0.6845" class="window_grandient1"/> <stop offset="0.6861" class="window_grandient2"/> <stop offset="0.6897" class="window_grandient3"/> </radialgradient> <circle class="large_window_path" cx="148.9" cy="111.3" r="10.5"/> </g> <circle class="small_window_path" cx="148.9" cy="132.4" r="5.2"/> </g> </g> </svg></div><div><hr class="separator" /><h3>Setting Up</h3>We’re going to make 3 states for this icon – a inactive state, a hover state, and a toggled click state. We’ll use a combination of mainly CSS, with a tiny bit of JavaScript to achieve this. If you don’t need the click function and just want a hover state, you can animate everything using only CSS without including any JavaScript at all. However I thought we should cover the JavaScript anyway. <img alt="SVG_states" class="alignnone size-full wp-image-10081" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/11/SVG_states.jpg" /> For the purposes of this tutorial, we’ll be writing all our markup inline, into one document. However if you’re working on a larger project, you can easily use PHP, JavaScript or simply an HTML “<object>” with the src set to the external SVG file to insert SVG markup into your pages. Also, we won’t be adding all the browser prefixes (-webkit, -O-, etc..) to the CSS, purely for the benefit of not bloating the tutorial markup. However you should use the correct vendor prefixes to ensure browser compatibility. You can add browser prefixes automatically using <a href="http://prefixr.com/">this prefixer</a> from Nettuts+. Setup a blank HTML document and paste your SVG code into the body, remove the CSS from SVG markup and place it in the head of document. You can actually delete the default styles from the document altogether, as we we’ll be custom styling the icon ourselves. </div><!DOCTYPE html> <head> <title>SVG Icon Animation</title> <style> /* SVG Styles Go Here */ </style> </head> <body> <div id="pageWrap"> <svg">  </svg> </div> </body> </html> <div><hr class="separator" /><h3>Styling SVG with CSS</h3>Now let’s start to style our SVG markup. Before we worry about animating the icon, let’s just focus on making the hover and inactive states. We’ll start with the inactive state: </div><div style="text-align: left;">/*============================================= [ Page Setup ] ==============================================*/ body{background:#34495e} #pageWrap {width:100%;overflow:hidden;} #rocket{display:block;margin:0 auto;margin-top:150px;} /*============================================= [ Inactive State Styles ] ==============================================*/ .rocket_inner { transform: translateY(15px) translateX(-3px); transition: .3s; } .icon_circle { transition: .2s; fill: #22303e; } .large_window_path { transition: .2s; fill: #22303e; } .small_window_path { transition: .2s; fill: #22303e; } .wing_shadow { fill: #34495e; } .rocket_bottom { fill: #34495e } .rocket_base { fill: #34495e } .rocket_shadow { fill: #34495e } .window_grandient { stop-color: #2DCB73 } .window_grandient1 { stop-color: #2AC16D } .window_grandient2 { stop-color: #29B968 } .window_grandient3 { stop-color: #28B767 } .wing_base { fill: #34495e } .fire_path { fill: #FC0 } .fire {display: none;}</div><div>As you can see, there are a number of elements we have styled using <a href="http://www.w3.org/TR/SVG/styling.html">SVG styling markup for CSS</a>. You can get more intricate with your styling, however you mostly only need to use the fill, stroke and stroke-width attributes. You’ll notice there’s a gradient fill as well, which was setup in Illustrator. This makes a reflection-gradient for the top window on the rocket once it’s animated. If you load your page in the browser now, your icon should look like this: <img alt="SVG_icon_inactive" class="alignnone size-full wp-image-10082" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/11/SVG_icon_inactive.jpg" /> <hr class="space" />Now into the hover effect. SVG class’s and IDs act as you would expect them to in regards to CSS. We can add a number of hover effects using <a href="http://www.w3.org/TR/SVG/styling.html">attributes</a>. </div><div style="text-align: left;">/*============================================= [ Hover Styles ] ==============================================*/ .rocket_wrap:hover .icon_circle { fill: #34495e; stroke: #fff; stroke-width: 3px; } .rocket_wrap:hover .rocket_base { fill: #fff; stroke: #fff; stroke-width: 3px; } .rocket_wrap:hover .small_window_path { fill: #34495e; stroke: #fff; stroke-width: 2px; } .rocket_wrap:hover .rocket_bottom { fill: #fff; stroke: #fff; } .rocket_wrap:hover .wing_base { fill: #fff; stroke: #fff; stroke-width: 3px; } .rocket_wrap:hover .large_window_path { fill: #34495e; stroke: #fff; stroke-width: 2px; } .rocket_wrap:hover .wing_shadow { display: none } .rocket_wrap:hover .rocket_shadow { fill: #fff }</div><div>Here we are basically changing the fill and stroke colors along with the stroke widths. It’s relatively straight forward and mostly self-explanatory. You can play around with all kinds of things like opacity, sizes, stroke caps and more. Load your page again and hover on/off the icon. It should change states. Pretty cool right? <img alt="SVG_icon_hover" class="alignnone size-full wp-image-10083" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/11/SVG_icon_hover.jpg" /> <hr class="separator" /><h3>Animating SVG With CSS</h3>There are a number of JavaScript plugins to animate SVG, and I expect these will develop further and become more user-friendly in the future. However you can achieve most effects using simple CSS and CSS keyframes. If you’re not familiar with CSS keyframes, Chris Coyier has a good intro article <a href="http://css-tricks.com/snippets/css/keyframe-animation-syntax/">here</a> on CSS-Tricks. If you don’t want any JavaScript, you can use CSS “@keyframe” animation properties using simple “:hover” effects. However we will use a little bit of JavaScript to toggle them on click. We’ll get to that later though, for now let’s just set-up the keyframes and click classes. We’ll setup our animation through 3 sets of classes. The SVG paths that don’t require animation but simply need to change color, will have a clicked class. Then for the elements that need to be animated, we’ll add a clicked class which contains the animation name of an “@keyframe” animation. Then we’ll apply them to their respective elements with a “.click” function using JavaScript. Let’s look at the static elements that just need a color change: </div><div style="text-align: left;">/*============================================= [ Clicked Styles ] ==============================================*/ .baseClicked { fill: #FFFFFF !important; stroke-width: 0px !important; } .shadowClicked { fill: #EDEDED !important; stroke-width: 0px !important; } .iconCircleClicked { fill: #282e3a !important; stroke: #fff !important; stroke-width: 7px !important; } .smallWindowClicked { fill: #28B767 !important; stroke-width: 0px !important; } .wingShadowClicked { display: block !important; fill: #FC9252 !important; } .wingBaseClicked { fill: #E16E36 !important; stroke-width: 0px !important; } .rocketBottomClicked { fill: #2DCB73 !important; stroke-width: 0px !important; } .largeWindowClicked { fill: url(#SVGID_2_) !important; stroke-width: 0px !important; } .innerClicked { transform: translateY(0px) translateX(-3px) !important; }</div><div>These are our classes that we’ll append to the icon’s various elements later. Again, these are mostly self explanatory changes to fill and stroke attributes. You’ll notice however that they all have an “!important” declaration. This resolves the issue of CSS hover effects being displayed while JavaScript click classes are active by overriding the “:hover” property. Now for the animation of the fire. You’ll notice the SVG file has 5 fire flames at the bottom. By default these aren’t visible as we have made them invisible using CSS using “display:none” Each fire element has it’s own ID, while sharing the same class. This way we can display them all at once while animating them individually. Let’s add our animation markup: </div><div style="text-align: left;">/*============================================= [ Animation Classes ] ==============================================*/ .fire { display: none; animation-delay: 0s; fill-opacity: 1; animation-timing-function: ease-in; stroke-width: 0px; animation-iteration-count: infinite; animation-timing-function: linear; transform-origin: 50% 50%; animation-direction: normal; } .clickedLeft { display: block; animation-delay: 0s; animation-name: fireLeft, fillOpacity1; animation-duration: 1.2s; } .clickedMiddle { display: block; animation-delay: 0s; animation-name: fireMiddle, fillOpacity1; animation-duration: 1s; } .clickedRight { display: block; animation-delay: 0s; animation-name: fireRight, fillOpacity1; animation-duration: 1.3s; } .clickedSmallLeft { display: block; animation-delay: 0s; animation-name: fireSmall, fillOpacity2; animation-duration: 1.3s; transform-origin: bottom; } .clickedSmallRight { display: block; animation-delay: 0.3s; animation-name: fireSmall, fillOpacity3; animation-duration: 1.6s; transform-origin: bottom; }</div><div>Notice we have two “animation-name“s for each element, one for fill-opacity and another for transforms. The reason we’re not using a single animation for every element is so it they all animate in slightly different ways. If they all shared a single keyframe animation, the result would look automated an unnatural. If you don’t want to use any JavasSript, you can add these classes as CSS “:hover” effects using the regular mark-up classes. Let’s setup the keyframes: </div><div style="text-align: left;">/*============================================= [ KeyFrame Animations ] ==============================================*/ @keyframes fireSmall { 10% { transform: rotate(17deg) translateY(1px) } 20% { transform: rotate(-13deg) translateY(2px) } 30% { transform: rotate(21deg) translateY(3px) } 40% { transform: rotate(-34deg)translateY(4px) } 50% { transform: rotate(24deg) translateY(5px) } 60% { transform: rotate(-17deg) translateY(6px) } 70% { transform: rotate(31deg) translateY(7px) } 80% { transform: rotate(-28deg) translateY(8px) } 90% { transform: rotate(14deg) translateY(9px) } 99% { transform: rotate(0deg) translateY(10px) } } @keyframes fireLeft { 6% { transform: rotate(25deg) } 15% { transform: rotate(-19deg) } 25% { transform: rotate(25deg) } 32% { transform: rotate(-30deg) } 46% { transform: rotate(22deg) } 54% { transform: rotate(-29deg) } 61% { transform: rotate(32deg) } 74% { transform: rotate(-9deg) } 83% { transform: rotate(16deg) } 99% { transform: rotate(0deg) } } @keyframes fireMiddle { 10% { transform: rotate(25deg) } 20% { transform: rotate(-25deg) } 30% { transform: rotate(30deg) } 40% { transform: rotate(-22deg) } 50% { transform: rotate(29deg) } 60% { transform: rotate(-45deg) } 70% { transform: rotate(37deg) } 80% { transform: rotate(-15deg) } 90% { transform: rotate(16deg) } 99% { transform: rotate(0deg) } } @keyframes fireRight { 15% { transform: rotate(17deg) } 23% { transform: rotate(-13deg) } 37% { transform: rotate(21deg) } 45% { transform: rotate(-34deg) } 54% { transform: rotate(24deg) } 67% { transform: rotate(-17deg) } 72% { transform: rotate(31deg) } 84% { transform: rotate(-28deg) } 96% { transform: rotate(14deg) } 99% { transform: rotate(0deg) } } @keyframes fillOpacity1 { 0% { fill-opacity: 1; stroke-opacity: 1; } 50% { fill-opacity: 1; stroke-opacity: 1; } 100% { fill-opacity: 0; stroke-opacity: 0; } } @keyframes fillOpacity2 { 0% { fill-opacity: 1; stroke-opacity: 1; } 25% { fill-opacity: 1; stroke-opacity: 1; } 100% { fill-opacity: 0; stroke-opacity: 0; } } @keyframes fillOpacity3 { 0% { fill-opacity: 1; stroke-opacity: 1; } 67% { fill-opacity: 1; stroke-opacity: 1; } 100% { fill-opacity: 0; stroke-opacity: 0; } } @keyframes rocektMove { 0% { transform: translateY(0px) } 100% { transform: translateY(20px) } }</div><div>This sets-up our keyframing for the fire animation as well as the rocket itself. CSS uses percentages to set each keyframe at a percentage of the total animation, which is defined in time using the “animation-duration:” attribute. <hr class="separator" /><h3>Applying CSS Classes to SVG using JavaScript</h3>This ins’t something that is easy to achieve, there are a number of complications to consider. Firstly jQeury selectors don’t work on SVG markup. So you can’t select a class/ID and add/toggle a CSS class the way you normally would. Fortunately Keith Wood has built a number of <a href="http://keith-wood.name/svg.html">JavaScript plugins</a> specifically for this (and for other SVG/jQuery related issues). We need to include his plugin so our JavaScript can read the SVG DOM. Head over and download the jQuery plugin <a href="http://keith-wood.name/svg.html">here</a> and add the “jquery.svg.js” and “jquery.svgdom.js” files to your document folder, as well as including a jQuery library. Insert the following in the head of your document below the CSS. </div><div style="text-align: left;"><script src="jquery.min.js"></script> <script src="jquery.svg.js"></script> <script src="jquery.svgdom.js"></script></div><div>Now we can access the SVG DOM using JavaScript selectors and add our CSS animation classes. Add the following below the SVG markup of the document: </div><div style="text-align: left;"><script type="text/javascript"> $(".rocket_wrap").click(function() { $("#fireLeft").toggleClass("clickedLeft"); $("#fireMiddle").toggleClass("clickedMiddle"); $("#fireRight").toggleClass("clickedRight"); $("#fireSmallRight").toggleClass("clickedSmallRight"); $("#fireSmallLeft").toggleClass("clickedSmallLeft"); $(".rocket_inner").toggleClass("innerClicked"); $(".rocket_base").toggleClass("baseClicked"); $(".rocket_shadow").toggleClass("shadowClicked"); $(".large_window_path").toggleClass("largeWindowClicked"); $(".small_window_path").toggleClass("smallWindowClicked"); $(".rocket_bottom").toggleClass("rocketBottomClicked"); $(".wing_base").toggleClass("wingBaseClicked"); $(".wing_shadow").toggleClass("wingShadowClicked"); $(".icon_circle").toggleClass("iconCircleClicked"); }); </script></div><div>Again, this is pretty self explanatory. If you’re not that familiar with jQuery, we are setting a click function for the rocket icon, then using a toggle function to add/remove the CSS animation classes. As we noted above, the “!impotant” deceleration in CSS will override the hover state when these are added. There are some considerations here though. Most notably that you can only access inline, internal SVG DOMs with jQeury. If you use a data attribute in an <object> for an externally stored SVG file, the jQuery won’t work. However, as I noted above there are a number of solutions to this issue depending on what you’re working with. I have included some links in the additional info section at the bottom of this article. <hr class="separator" /><h3>An Update On Firefox (Updated 23.12.2013)</h3>After playing around with a number of CSS properties regarding the animation of SVG, I realised that Firefox does not interpret the CSS attribute “transform-origin:” when animating SVG groups (<g>). Regardless of whether you prefix it, or where you put it (either in the @keyframe or on the group  selector). So “-moz-transform-origin:” won’t work, no matter what. However it does work on SVG paths. If you’re not rotaing anything, this probably won’t cause an issue. However to ensure browser compatibility, you should use ID and class selectors on the SVG path elements, not groups. Hopefully this get’s fixed some time soon by the Moz dev team. The only issue this causes is that animating a group of paths with the same transform origin can be fickle, as you need to go through each path element and set their individual transform origins to the same point relative to each path (rather than just grouping them). <hr class="separator" /><div style="text-align: center;"><a class="btn sunset small" href="http://pencilscoop.com/demos/svg/rocket/index.html" target="_blank">Full Demo</a> <a class="btn sunset small" href="http://pencilscoop.com/demos/svg/rocket_animation.zip" target="_blank">Download Source</a> <a class="btn sunset small" href="http://pencilscoop.com/demos/svg/CSS%20Only%20Version/index.html" target="_blank">CSS Only Demo</a></div><hr class="separator" /><h3>Summary</h3>So as you can see, we are able to animate SVGs with simple CSS “@keyframe” animations. The demo above shows the animation with no jQuery at all. Having said that, this is just one way to animate SVG using simple markup. There are already a number of jQuery libraries, plugins and other useful web apps that you can use. I’ve included a number of useful links below. On a final note, one thing I’d like to add is the best thing about animating an icon this way and probably the biggest advantage over using a third-party plugin, is that you can include all your CSS styling and animation mark-up directly in the SVG file itself (rather than in your page’s stylesheet). This is seriously the best thing about it, as it doesn’t bloat or effect existing mark-up. Furthermore, if you do a lot of work for clients, once you’ve set up all your icons, you can keep all the animations set-up in the SVG, which makes it really easy and efficient. Simply use a html “<object>” with the source to your SVG and all the animation and styling is ready to go! I hope you’ve enjoyed this tutorial. <hr class="separator" /><h3>Additional Info</h3>Here are some useful SVG related links: <div class="bullet"><ul><li><a href="http://css-tricks.com/using-svg/">Using SVG</a> - A complete guide to using SVG by Chris Coyier.</li><li><a href="http://www.w3.org/TR/SVG/styling.html">Styling SVG</a> - W3C’s documentation for styling SVG.</li><li><a href="http://design.tutsplus.com/articles/making-icons-smarter--webdesign-15586">Making Web Icons Smarter</a> - Tuts+ article on Iconic’s “smart icons”</li><li><a href="http://design.tutsplus.com/articles/manipulating-svg-icons-with-simple-css--webdesign-15694">Manipulating SVG Icons With Simple CSS </a>- Tuts+ article on style Iconic’s SVG implementation.</li><li><a href="http://tutsplus.github.io/Styling-Iconic/styling/index.html#modal-kickstarter">Light Up Your Icons</a> - An example of what’s possible with SVG.</li><li><a href="http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/getting-started-with-scalable-vector-graphics-svg/">Getting Started With Scalable Vector Graphics (SVG)</a> - Tuts+ intro to using SVG.</li><li><a href="http://tympanus.net/codrops/2013/11/05/animated-svg-icons-with-snap-svg/">Animated Svg Icons With Snap.Svg </a>- Article & Demo on SVG animations from Codrops.</li><li><a href="http://useiconic.com/">Iconic</a> - Advanced Icons for the Modern Web (still in development at the time of writing).</li><li><a href="https://github.com/filamentgroup/grunticon">Grunticon</a> - An SVG icon solution.</li><li><a href="https://github.com/somerandomdude/SVG-Injector">SVG Injector</a> - A Javascript based script for injecting SVG directly into HTML.</li><li><a href="https://github.com/jkphl/iconizr">Iconizr </a>- A PHP command line tool for converting SVG images to a set of CSS icons.</li></ul></div><hr class="separator" />What are your thoughts on animating SVG? Are you new to CSS keyframing? Let us know your thoughts in the comments below. </div></div>

Animate SVG Icons with CSS3 & jQuery

Recently, there’s been a lot of buzz throughout the web design and development community on using SVG for icons. Due to a number of limita...

+ Read more »

150+ Best Free PSD Mock-Ups for Designers

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoyiHzSEr7_PCGqpdnFfIAEc-q21Nu5zvaTdZJ6i7U7g8fYQORotKgr51avVEVxE0xHR0rCYLCffNp5fpCbcX5MjdDQYkXfdHObyyeKXGen7Tm3wWLNluGYdMCEdLdWyvtQ-AWR5JFTDCZ/s1600/mockupcover.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoyiHzSEr7_PCGqpdnFfIAEc-q21Nu5zvaTdZJ6i7U7g8fYQORotKgr51avVEVxE0xHR0rCYLCffNp5fpCbcX5MjdDQYkXfdHObyyeKXGen7Tm3wWLNluGYdMCEdLdWyvtQ-AWR5JFTDCZ/s640/mockupcover.jpg" width="640" /></a></div>Mock-ups are an essential part of any good designers creative repertoire. Our ideas and work may be great, but ultimately if not presented properly, a good design can often go astray. Which is why we have mockups. They serve as a integral visual aid to both ourselves and the client in helping bring concept to concrete. Not to mention they save both time and money, letting us focus our attention on what we do best: Design. So whether you’re designing an app, a website,  a business card, brochure, book, poster, t-shirt, packaging or an entire brand identity, having a good collection of mock-ups is integral. Of course you can always pay or create your own custom mock-ups, but today with so much free content it’s relatively easy to visualize your latest project for free. So today we have compiled this comprehensive list of free PSD mock-ups, including everything from apps to packaging. We hope you find something handy for your next project. <a name='more'></a> <h4 id="screenshot-title">7 PSDs from iOS7</h4><div style="text-align: center;"><img alt="iphone-5c-mock-up-1" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/iphone-5c-mock-up-1.jpg" /></div><a class="btn sunset small" href="http://dribbble.com/shots/1239454-FREE-7-PSDs-from-iOS7" target="_blank">Download/Link</a> <hr class="separator" /><h4>iPhone 5C – free PSD mockup</h4><div style="text-align: center;"><img alt="iphone-5c-mock-up-3" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/iphone-5c-mock-up-3.jpg" /></div><a class="btn sunset small" href="http://www.tempees.com/free-download/iphone-5c-free-psd-mockup" target="_blank">Download/Link</a> <hr class="separator" /><h4>iPhone 5c Showcase Template</h4><div style="text-align: center;"><img alt="iphone-5c-mock-up-2" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/iphone-5c-mock-up-2.jpg" /></div><a class="btn sunset small" href="http://ui8.net/iphone-5c-template" target="_blank">Download/Link</a> <hr class="separator" /><h4>iPhone 5C Perspective Mock up</h4><div style="text-align: center;"><img alt="iphone-5c-mock-up-4" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/iphone-5c-mock-up-4.jpg" /></div><a class="btn sunset small" href="http://www.techandall.com/iphone-5c-perspective-mock-up/" target="_blank">Download/Link</a> <hr class="separator" /><h4>iPhone 5C Mock-Up</h4><div style="text-align: center;"><img alt="iphone-5c" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/iphone-5c.jpg" /></div><a class="btn sunset small" href="http://dribbble.com/shots/1230873-iPhone-5c-Template" target="_blank">Download/Link</a> <hr class="separator" /><h4>iPone 5 Mock-Up</h4><div style="text-align: center;"><img alt="iphone5_mockup" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/iphone5_mockup.jpg" /></div><a class="btn sunset small" href="http://dribbble.com/shots/930529-Free-Iphone-5-Template-PSD" target="_blank">Download/Link</a> <a href="http://dribbble.com/shots/930529-Free-Iphone-5-Template-PSD"> </a> <hr class="separator" /><h4 id="screenshot-title">iPhone 5S Perspective PSD</h4><div style="text-align: center;"><img alt="iphone-5s--mock-up-1" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/iphone-5s-mock-up-1.jpg" /></div><a class="btn sunset small" href="http://dribbble.com/shots/1236104-iPhone-5S-PSD?list=users" target="_blank">Download/Link</a> <hr class="separator" /><h4>iPhone 5s All Colors Mock-Up</h4><div style="text-align: center;"><img alt="iphone-5s--mock-up-2" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/iphone-5s-mock-up-2.jpg" /></div><a class="btn sunset small" href="http://www.pixeden.com/psd-mock-up-templates/3-4-view-iphone-5s-psd-vector-mockup" target="_blank">Download/Link</a> <hr class="separator" /><h4>iPhone 5s Gold Mock-Up</h4><div style="text-align: center;"><img alt="iphone5s" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/iphone5s.jpg" /></div><a class="btn sunset small" href="http://dribbble.com/shots/1230564-Gold-iPhone-5S-PSD" target="_blank">Download/Link</a> <hr class="separator" /><h4>Iphone 5 Mock-UP - 15x PSD</h4><hr class="space" /><div style="text-align: center;"><img alt="iphone5-mock-up2" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/iphone5-mock-up2.jpg" /></div><a class="btn sunset small" href="http://dribbble.com/shots/750626-iPhone-5-Mock-ups-FREEMIUM" target="_blank">Download</a> <hr class="space" /><hr class="separator" /><h4>3D View iPhone 5 Psd Vector Mockup</h4><div style="text-align: center;"><img alt="001-iphone-5-mobile-celular-mock-up-psd-3d-perspective" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/09/001-iphone-5-mobile-celular-mock-up-psd-3d-perspective.jpg" /></div><a class="btn sunset small" href="http://www.pixeden.com/psd-mock-up-templates/3d-view-iphone-5-psd-vector-mockup" target="_blank">Download/Link</a> <hr class="separator" /><h4>Black Iphone 5 Mockup Template (Psd)</h4><div style="text-align: center;"><img alt="Iphone-5-Thumb-530x360" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/09/Iphone-5-Thumb-530x360.jpg" /></div><a class="btn sunset small" href="http://www.blugraphic.com/2013/07/16/black-iphone-5-mockup-template-psd/" target="_blank">Download/Link</a> <hr class="separator" /><h4>Flat iPhone Mock-Up Pack</h4><div style="text-align: center;"><img alt="flatphone-mockup" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/flatphone-mockup.jpg" /></div><a class="btn sunset small" href="http://www.pixeden.com/psd-mock-up-templates/iphone-5-psd-flat-design-mockup" target="_blank">Download/Link</a><a href="http://www.pixeden.com/psd-mock-up-templates/iphone-5-psd-flat-design-mockup"> </a> <hr class="separator" /><h4 id="screenshot-title">Flat NOKIA Lumia 920 3D MockUp</h4><div style="text-align: center;"><a href="http://dribbble.com/shots/1073566-FREE-PSD-Flat-NOKIA-Lumia-920-3D-MockUp" target="_blank"><img alt="free-lumia-mockup" class="aligncenter wp-image-8020" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/free-lumia-mockup.jpg" /></a></div><a class="btn sunset small" href="http://dribbble.com/shots/1073566-FREE-PSD-Flat-NOKIA-Lumia-920-3D-MockUp" target="_blank">Download/Link</a><a href="http://www.pixeden.com/psd-mock-up-templates/iphone-5-psd-flat-design-mockup"> </a> <hr class="separator" /><h4>Nokia Lumia Photo-Realistic Mock-Up</h4><div style="text-align: center;"><a href="http://dribbble.com/shots/724863-Lumia-920-free-psd" target="_blank"><img alt="lumia-mockup" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/lumia-mockup.jpg" /></a></div><a class="btn sunset small" href="http://dribbble.com/shots/724863-Lumia-920-free-psd/" target="_blank">Download/Link</a> <hr class="separator" /><h4>Android Flat UI Mock-Up</h4><div style="text-align: center;"><a href="http://dribbble.com/shots/1104725-HTC-One-and-Galaxy-S4-PSD" target="_blank"><img alt="android-mock-up" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/android-mock-up.jpg" /></a></div><a class="btn sunset small" href="http://dribbble.com/shots/1104725-HTC-One-and-Galaxy-S4-PSD" target="_blank">Download/Link</a><a href="http://dribbble.com/shots/1104725-HTC-One-and-Galaxy-S4-PSD"> </a> <hr class="separator" /><h4>Galaxy SIII Photo-Realistic Mock-Up</h4><div style="text-align: center;"><a href="http://freebiesbug.com/psd-freebies/galaxy-s3-white-vector-mockup/" target="_blank"><img alt="s3mockup" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/s3mockup.jpg" /></a></div><a class="btn sunset small" href="http://freebiesbug.com/psd-freebies/galaxy-s3-white-vector-mockup/" target="_blank">Download/Link</a><a href="http://freebiesbug.com/psd-freebies/galaxy-s3-white-vector-mockup/"> </a> <hr class="separator" /><h4>Flagship Smart-Phone Flat UI Mock-Up</h4><div style="text-align: center;"><a href="http://dribbble.com/shots/930250-Mobile-Flagships-with-PSD" target="_blank"><img alt="flagship-mockup" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/flagship-mockup.jpg" /></a></div><a class="btn sunset small" href="http://dribbble.com/shots/930250-Mobile-Flagships-with-PSD" target="_blank">Download/Link</a><a href="http://dribbble.com/shots/930250-Mobile-Flagships-with-PSD"> </a> <hr class="separator" /><h4>HTC One 2013 Mock-Up</h4><div style="text-align: center;"><a href="http://ahelor.deviantart.com/art/HTC-One-2013-PSD-mockup-373099865" target="_blank"><img alt="HTC-One-2013-PSD-mockup" class="aligncenter wp-image-8021" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/HTC-One-2013-PSD-mockup.jpg" /></a></div><a class="btn sunset small" href="http://ahelor.deviantart.com/art/HTC-One-2013-PSD-mockup-373099865" target="_blank">Download/Link</a><a href="http://www.pixeden.com/psd-mock-up-templates/iphone-5-psd-flat-design-mockup"> </a> <hr class="separator" /><h4>Multiple Devices Flat Mock-Up</h4><div style="text-align: center;"><img alt="multiple_devices" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/09/multiple_devices.png" /></div><a class="btn sunset small" href="http://dribbble.com/shots/859471-Multiple-Devices" target="_blank">Download/Link</a> <hr class="separator" /><h4>iPOD Touch Mock-up</h4><div style="text-align: center;"><img alt="ipod-mockup" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/ipod-mockup.jpg" /></div><a class="btn sunset small" href="http://freebiesbug.com/psd-freebies/ipod-touch-mockup/" target="_blank">Download/Link</a> <hr class="separator" /><h4>iPad Web Preview Mockup</h4><div style="text-align: center;"><a href="http://www.bestpsdfreebies.com/freebie/ipad-web-preview-mockup/" target="_blank"><img alt="ipad-with-cover-mockup" class="aligncenter wp-image-8033" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/ipad-with-cover-mockup.jpg" /></a></div><a class="btn sunset small" href="http://www.bestpsdfreebies.com/freebie/ipad-web-preview-mockup/" target="_blank">Download/Link</a> <hr class="separator" /><h4>Pixel Perfect iPad Mock-Up</h4><div style="text-align: center;"><img alt="ipad-mock-up" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/ipad-mock-up.jpg" /></div><a class="btn sunset small" href="http://dribbble.com/shots/855660-iPad-Mini-Psd" target="_blank">Download/Link</a> <hr class="separator" /><h4>iPad Mini Photo-Realistic Mock-Up</h4><h4><img alt="ipad-mini-mockup2" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/ipad-mini-mockup2.jpg" /></h4><a class="btn sunset small" href="http://dribbble.com/shots/855660-iPad-Mini-Psd" target="_blank">Download/Link</a> <hr class="separator" /><h4 id="screenshot-title">Free iPad Mini PSD</h4><div style="text-align: center;"><img alt="ipad_mini" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/09/ipad_mini.png" style="border: 1px solid black;" /></div><a class="btn sunset small" href="http://dribbble.com/shots/802725-Free-iPad-Mini-PSD" target="_blank">Download/Link</a> <hr class="separator" /><h4>Apple iPad Mini PSD</h4><div style="text-align: center;"><a href="http://wellgraphic.deviantart.com/art/Apple-iPad-Mini-PSD-333942556" target="_blank"><img alt="ipad-mini-PSD" class="aligncenter wp-image-8031" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/ipad-mini-PSD.jpg" /></a></div><a class="btn sunset small" href="http://wellgraphic.deviantart.com/art/Apple-iPad-Mini-PSD-333942556" target="_blank">Download/Link</a> <hr class="separator" /><h4>Psd iPad Retina Mockup Template</h4><div style="text-align: center;"><img alt="002-ipad-retina-display-landscape-black-white-mockup-psd" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/09/002-ipad-retina-display-landscape-black-white-mockup-psd.jpg" /></div><a class="btn sunset small" href="http://www.pixeden.com/psd-mock-up-templates/psd-ipad-retina-mockup-template" target="_blank">Download/Link</a> <hr class="separator" /><h4 id="screenshot-title">Ipad Mockup Freebie</h4><div style="text-align: center;"><a href="http://dribbble.com/shots/760712-Ipad-Mockup-Freebie" target="_blank"><img alt="ipad-mini-PSd-folded" class="aligncenter wp-image-8034" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/ipad-mini-PSd-folded.jpg" /></a></div><a class="btn sunset small" href="http://dribbble.com/shots/760712-Ipad-Mockup-Freebie" target="_blank">Download/Link</a> <hr class="separator" /><h4>Perspective Screen iPad</h4><div style="text-align: center;"><a href="http://www.cssauthor.com/beautiful-ipad-mockup-template-psd-for-free-download/" target="_blank"><img alt="ipad-screen-mockup" class="aligncenter wp-image-8029" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/ipad-screen-mockup.jpg" /></a></div> <a class="btn sunset small" href="http://www.cssauthor.com/beautiful-ipad-mockup-template-psd-for-free-download/" target="_blank">Download/Link</a> <hr class="separator" /><h4>Ipad Retina Mockup (Psd)</h4><div style="text-align: center;"><img alt="Ipad-Thumb-530x360" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/09/Ipad-Thumb-530x360.jpg" /></div><a class="btn sunset small" href="http://www.blugraphic.com/2013/07/15/ipad-retina-mockup-psd/" target="_blank">Download/Link</a> <hr class="separator" /><h4>iPad Psd Flat Mockup</h4><div style="text-align: center;"><img alt="001-ipad-mockup-flat-black-white-landscape-psd" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/09/001-ipad-mockup-flat-black-white-landscape-psd.jpg" /></div><a class="btn sunset small" href="http://www.pixeden.com/psd-mock-up-templates/ipad-psd-flat-mockup" target="_blank">Download/Link</a> <hr class="separator" /><h4>Tabletop Mockup Free PSD</h4><div style="text-align: center;"><img alt="free-psd-tabletop-laptop-display-640x450" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/09/free-psd-tabletop-laptop-display-640x450.png" /></div><a class="btn sunset small" href="http://dribbble.com/shots/1114978-Free-Showcase-PSD" target="_blank">Download/Link</a> <hr class="separator" /><h4>Macbook Air PSD</h4><div style="text-align: center;"><img alt="mba" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/09/mba.jpg" /></div><a class="btn sunset small" href="http://365psd.com/day/3-35/" target="_blank">Download/Link</a> <hr class="separator" /><h4>Macbook PSD</h4><div style="text-align: center;"><img alt="Macbook_PSD_by_obsilion" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/09/Macbook_PSD_by_obsilion.png" /></div><a class="btn sunset small" href="http://obsilion.deviantart.com/art/Macbook-PSD-125968880" target="_blank">Download/Link</a> <hr class="separator" /><h4>Mac Book Pro 15x Mock-Up Pack</h4><div style="text-align: center;"><img alt="macbook-pro-mock-up" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/macbook-pro-mock-up.jpg" style="border: 1px solid black;" /></div><a class="btn sunset small" href="http://dribbble.com/shots/985593-MacBook-Pro-15-Scalable-Mock-ups" target="_blank">Download/Link</a><a href="http://dribbble.com/shots/985593-MacBook-Pro-15-Scalable-Mock-ups"> </a> <hr class="separator" /><h4>MacBook Pro Mock-up</h4><div style="text-align: center;"><img alt="001-macbook-pro-mockup-psd-editable-3d-template" class="wp-image-7619 aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/09/001-macbook-pro-mockup-psd-editable-3d-template.jpg" /></div><a class="btn sunset small" href="http://www.pixeden.com/psd-mock-up-templates/macbook-pro-retina-psd-mockup/" target="_blank">Download/Link</a> <hr class="separator" /><h4>MacBook PSD</h4><div style="text-align: center;"><a href="http://creativestocks.com/gallery/mackbook-psd/" target="_blank"><img alt="MacBook-PSD-mockup" class="aligncenter wp-image-8028" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/MacBook-PSD-mockup.jpg" /></a></div><a class="btn sunset small" href="http://creativestocks.com/gallery/mackbook-psd/" target="_blank">Download/Link</a> <hr class="separator" /><h4 id="screenshot-title">[PSD] iMac + MacBook Retina</h4><div style="text-align: center;"><img alt="imac-macbook-freebie-dribble-_2x" class="wp-image-7622 aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/09/imac-macbook-freebie-dribble-_2x.png" /></div><a class="btn sunset small" href="http://dribbble.com/shots/829545--PSD-iMac-MacBook-Retina" target="_blank">Download/Link</a> <hr class="separator" /><h4>iMac & Macbook Psd Flat Mockup</h4><div style="text-align: center;"><img alt="005-imac-macbook-mockup-flat-psd" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/09/005-imac-macbook-mockup-flat-psd.jpg" /></div><a class="btn sunset small" href="http://www.pixeden.com/psd-mock-up-templates/imac-macbook-psd-flat-mockup" target="_blank">Download/Link</a> <hr class="separator" /><h4 id="screenshot-title">Freebie! 27″ iMac PSD</h4><div style="text-align: center;"><img alt="bz-freebie-27-inch-imac-shot" class=" wp-image-7623 aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/09/bz-freebie-27-inch-imac-shot.png" /></div><a class="btn sunset small" href="http://dribbble.com/shots/871772-Freebie-27-iMac-PSD" target="_blank">Download/Link</a> <hr class="separator" /><h4>New Thin iMac Mock-Up</h4><div style="text-align: center;"><img alt="new-imac-mock-up" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/new-imac-mock-up.jpg" /></div><a class="btn sunset small" href="http://dribbble.com/shots/819957-Imac-psd" target="_blank">Download/Link</a><a href="http://dribbble.com/shots/819957-Imac-psd"> </a> <hr class="separator" /><h4>Perspective Thin iMac</h4><div style="text-align: center;"><a href="http://www.psdcovers.com/imac005/#more" target="_blank"><img alt="perspective-thin-imac" class="aligncenter wp-image-8049" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/perspective-thin-imac.jpg" /></a></div><a class="btn sunset small" href="http://www.psdcovers.com/imac005/#more" target="_blank">Download/Link</a><a href="http://dribbble.com/shots/819957-Imac-psd"> </a> <hr class="separator" /><h4>The New iMac – 2012 (PSD)</h4><div style="text-align: center;"><a href="http://designerfirst.com/graphics/the-new-imac-2012-psd/" target="_blank"><img alt="new-imac-PSD" class="aligncenter wp-image-8027" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/new-imac-PSD.jpg" /></a></div><a class="btn sunset small" href="http://designerfirst.com/graphics/the-new-imac-2012-psd/" target="_blank">Download/Link</a><a href="http://dribbble.com/shots/819957-Imac-psd"> </a> <hr class="separator" /><h4 id="screenshot-title">Apple Keyboard, Free .PSD</h4><div style="text-align: center;"><img alt="dribble_keyboard" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/09/dribble_keyboard.png" /></div><a class="btn sunset small" href="http://dribbble.com/shots/978890-Apple-Keyboard-Free-PSD" target="_blank">Download/Link</a> <hr class="separator" />Flat Apple Devices <div style="text-align: center;"><img alt="all-devices" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/09/all-devices.png" /></div><a class="btn sunset small" href="http://dribbble.com/shots/867844-Apple-Devices" target="_blank">Download/Link</a> <hr class="separator" /><h4>Responsive Design Mock-Up Pack</h4><div style="text-align: center;"><img alt="responsive-mockup" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/responsive-mockup.jpg" /></div><a class="btn sunset small" href="http://medialoot.com/item/free-responsive-screen-mockup-pack/" target="_blank">Download/Link</a><a href="http://medialoot.com/item/free-responsive-screen-mockup-pack/"> </a> <hr class="separator" /><h4>Responsive Layout for Flat UI</h4><div style="text-align: center;"><img alt="flat-responsive-mock-up" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/flat-responsive-mock-up.jpg" /></div><a class="btn sunset small" href="http://www.behance.net/gallery/Free-Responsive-Screen-Mock-Up-iMock-Up-Free-Edtion/9791807" target="_blank">Download/Link</a><a href="http://www.behance.net/gallery/Free-Responsive-Screen-Mock-Up-iMock-Up-Free-Edtion/9791807"> </a> <hr class="separator" /><h4>iPad Screen Mock up</h4><div style="text-align: center;"><img alt="ipad-app-screen" class=" wp-image-7646 aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/ipad-app-screen.jpg" style="border: 1px solid black;" /></div><a class="btn sunset small" href="http://www.techandall.com/ipad-screen-mock-up-via-smart-object-psd/" target="_blank">Download/Link</a><a href="http://www.pixeden.com/psd-mock-up-templates/psd-ipad-perspective-mockup"> </a> <hr class="separator" /><h4>Flat Design App Screen Mock-Up</h4><div style="text-align: center;"><a href="http://graphicburger.com/isometric-perspective-mock-up/" target="_blank"><img alt="flatui-mock-up" class="aligncenter wp-image-4957" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/flatui-mock-up.jpg" /></a></div><a class="btn sunset small" href="http://graphicburger.com/isometric-perspective-mock-up/" target="_blank">Download/Link</a><a href="http://graphicburger.com/isometric-perspective-mock-up/"> </a> <hr class="separator" /><h4>Perspective Screen MockUp</h4><div style="text-align: center;"><img alt="app-screen-perspective-3" class="aligncenter wp-image-7647" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/app-screen-perspective-3.jpg" /></div><a class="btn sunset small" href="http://www.techandall.com/perspective-screen-mockup/" target="_blank">Download/Link</a><a href="http://graphicburger.com/isometric-perspective-mock-up/"> </a> <hr class="separator" /><h4>Perspective App Screens</h4><div style="text-align: center;"><img alt="app-screen-perspective-4" class="aligncenter wp-image-7648" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/app-screen-perspective-4.jpg" /></div><a class="btn sunset small" href="http://graphicburger.com/perspective-app-screens-mock-up/" target="_blank">Download/Link</a><a href="http://graphicburger.com/isometric-perspective-mock-up/"> </a> <hr class="separator" /><h4>Perspective App Screen Mock-Up</h4><div style="text-align: center;"><a href="http://www.pixeden.com/psd-mock-up-templates/perspective-app-screen-mock-up-4" target="_blank"><img alt="app-screen-mockup3" class="aligncenter wp-image-4968" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/app-screen-mockup3.jpg" /></a></div><a class="btn sunset small" href="http://www.pixeden.com/psd-mock-up-templates/perspective-app-screen-mock-up-4" target="_blank">Download/Link</a><a href="http://www.pixeden.com/psd-mock-up-templates/perspective-app-screen-mock-up-4"> </a> <hr class="separator" /><h4>Detailed App Screen Mock-Up</h4><div style="text-align: center;"><a href="http://dribbble.com/shots/972537-Free-Mobile-Mockup" target="_blank"><img alt="Free_Mobile_Mockup_Pixel" class="aligncenter wp-image-4982" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/Free_Mobile_Mockup_Pixel.jpg" /></a></div><a class="btn sunset small" href="http://dribbble.com/shots/972537-Free-Mobile-Mockup" target="_blank">Download/Link</a><a href="http://dribbble.com/shots/972537-Free-Mobile-Mockup"> </a> <hr class="separator" /><h4>iOS 7 App Screen Mock-Up</h4><div style="text-align: center;"><a href="http://graphicburger.com/app-screen-front-view-mock-up/" target="_blank"><img alt="App-Screen-fulmock-up" class="aligncenter wp-image-4942" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/App-Screen-fulmock-up.jpg" /></a></div><a class="btn sunset small" href="http://graphicburger.com/app-screen-front-view-mock-up/" target="_blank">Download/Link</a><a href="http://graphicburger.com/app-screen-front-view-mock-up/"> </a> <hr class="separator" /><h4>App Screen Front View PSD</h4><div style="text-align: center;"><a href="http://www.techandall.com/iphone-app-front-screen-mockup-psd/" target="_blank"><img alt="Techandall_iPhone_screen_mockup_FREE-Preview" class="aligncenter wp-image-8006" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/Techandall_iPhone_screen_mockup_FREE-Preview.jpg" /></a></div><a class="btn sunset small" href="http://www.techandall.com/iphone-app-front-screen-mockup-psd/" target="_blank">Download/Link</a><a href="http://graphicburger.com/app-screen-front-view-mock-up/"> </a> <hr class="separator" /><h4>Flat UI Browser Mock-Up Pack</h4><div style="text-align: center;"><a href="http://dribbble.com/shots/1150483-Browser-Mock-up-Frames-Free-Download" target="_blank"><img alt="browser-mock-up" class="aligncenter wp-image-5014" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/browser-mock-up.jpg" /></a></div><a class="btn sunset small" href="http://dribbble.com/shots/1150483-Browser-Mock-up-Frames-Free-Download" target="_blank">Download/Link</a><a href="http://dribbble.com/shots/1150483-Browser-Mock-up-Frames-Free-Download"> </a> <hr class="separator" /><h4>Flat Browser Set PSD</h4><div style="text-align: center;"><a href="http://www.pixeden.com/psd-web-elements/flat-psd-browsers-set" target="_blank"><img alt="001-flat-browser-web-set-google-chrome-safari-firefox-psd" class="aligncenter wp-image-8005" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/001-flat-browser-web-set-google-chrome-safari-firefox-psd.jpg" /></a></div><a class="btn sunset small" href="http://www.pixeden.com/psd-web-elements/flat-psd-browsers-set" target="_blank">Download/Link</a><a href="http://dribbble.com/shots/1150483-Browser-Mock-up-Frames-Free-Download"> </a> <hr class="separator" /><h4>330ml Soda Can Mock-Up</h4><div style="text-align: center;"><a href="http://dribbble.com/shots/1046332-Soda-Can-Mockup" target="_blank"><img alt="330sodamockup" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/330sodamockup.jpg" /></a></div><a class="btn sunset small" href="http://dribbble.com/shots/1046332-Soda-Can-Mockup" target="_blank">Download/Link</a><a href="http://dribbble.com/shots/1046332-Soda-Can-Mockup"> </a> <hr class="separator" /><h4>355ml Soda Can Mock-Up</h4><div style="text-align: center;"><a href="http://www.psdcovers.com/can006/" target="_blank"><img alt="can-mock-up" class="aligncenter wp-image-8045" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/can-mock-up.jpg" /></a></div><a class="btn sunset small" href="http://www.psdcovers.com/can006/" target="_blank">Download/Link</a><a href="http://www.psdcovers.com/can006/"> </a> <hr class="separator" /><h4>355ml Soda Can Mock-Up Front View</h4><div style="text-align: center;"><a href="http://www.psdcovers.com/can005/" target="_blank"><img alt="7up-can-mockup" class="aligncenter wp-image-8046" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/7up-can-mockup.jpg" /></a></div><a class="btn sunset small" href="http://www.psdcovers.com/can005/" target="_blank">Download/Link</a><a href="http://www.psdcovers.com/can006/"> </a> <hr class="separator" /><h4>Soda Can Mock-Up</h4><a href="http://www.pixeden.com/psd-mock-up-templates/psd-soda-can-mock-up-template" target="_blank"><img alt="soda-can-mockup" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/soda-can-mockup.jpg" /></a> <a class="btn sunset small" href="http://www.pixeden.com/psd-mock-up-templates/psd-soda-can-mock-up-template" target="_blank">Download/Link</a><a href="http://www.pixeden.com/psd-mock-up-templates/psd-soda-can-mock-up-template"> </a> <hr class="separator" /><h4>Metal Tin with Plastic Lid Mock-Up</h4><a href="http://www.psdcovers.com/can013/"><img alt="tin-mock-up" class="aligncenter size-full wp-image-4930" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/tin-mock-up.jpg" /></a> <a class="btn sunset small" href="http://www.psdcovers.com/can013/" target="_blank">Download/Link</a><a href="http://www.psdcovers.com/can013/"> </a> <hr class="separator" /><h4>Wine Bottle Mock-Up</h4><div style="text-align: center;"><a href="http://www.pixeden.com/psd-mock-up-templates/psd-wine-bottle-mockup-template" target="_blank"><img alt="wine-bottle-mock-up" class="aligncenter wp-image-4921" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/wine-bottle-mock-up.jpg" /></a></div><a class="btn sunset small" href="http://www.pixeden.com/psd-mock-up-templates/psd-wine-bottle-mockup-template/" target="_blank">Download/Link</a><a href="http://www.pixeden.com/psd-mock-up-templates/psd-wine-bottle-mockup-template"> </a> <hr class="separator" /><h4>Modern Wine Bottle Mock-Up</h4><div style="text-align: center;"><a href="http://www.psdcovers.com/wine001/" target="_blank"><img alt="wine-mockup2" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/wine-mockup2.jpg" /></a></div><a class="btn sunset small" href="http://www.psdcovers.com/wine001/" target="_blank">Download/Link</a><a href="http://www.psdcovers.com/wine001/"> </a> <hr class="separator" /><h4>Milk Carton Mock-Up</h4><div style="text-align: center;"><a href="http://www.psdcovers.com/carton009/" target="_blank"><img alt="milk-carton-mock-up" class="aligncenter wp-image-4926" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/milk-carton-mock-up.jpg" /></a></div><a class="btn sunset small" href="http://www.psdcovers.com/carton009/" target="_blank">Download/Link</a> <hr class="separator" /><h4>STARBUCKS Style Cup Mockup</h4><div style="text-align: center;"><a href="http://www.behance.net/gallery/STARBUCKS-Style-Mockup-%28Free%29/3858585" target="_blank"><img alt="cofee-cup-mockup" class="aligncenter wp-image-4898" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/cofee-cup-mockup.jpg" /></a></div><a class="btn sunset small" href="http://www.behance.net/gallery/STARBUCKS-Style-Mockup-%28Free%29/3858585" target="_blank">Download/Link</a><a href="http://www.behance.net/gallery/STARBUCKS-Style-Mockup-%28Free%29/3858585"> </a> <div style="text-align: left;"></div><hr class="separator" /><h4 style="text-align: left;">Shopping Bag Mock-Up</h4><div style="text-align: center;"><a href="http://www.psdcovers.com/bag003/#more" target="_blank"><img alt="bag-mockup-1" class="aligncenter wp-image-8050" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/bag-mockup-1.jpg" /></a></div><a class="btn sunset small" href="http://www.psdcovers.com/bag003/#more" target="_blank">Download/Link</a><a href="http://www.behance.net/gallery/STARBUCKS-Style-Mockup-%28Free%29/3858585"> </a> <hr class="separator" /><h4>Cosmetic Cream Mock-Up</h4><div style="text-align: center;"><a href="http://www.psdcovers.com/tube001/#more" target="_blank"><img alt="comsetic-tube-mockup" class="aligncenter wp-image-8051" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/comsetic-tube-mockup.jpg" /></a></div><a class="btn sunset small" href="http://www.psdcovers.com/tube001/#more" target="_blank">Download/Link</a><a href="http://www.behance.net/gallery/STARBUCKS-Style-Mockup-%28Free%29/3858585"> </a> <hr class="separator" /><h4>Mug Mock-Up</h4><div style="text-align: center;"><a href="http://www.psdcovers.com/mug003/#more" target="_blank"><img alt="mug-mockup" class="aligncenter wp-image-8052" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/mug-mockup.jpg" /></a></div><a class="btn sunset small" href="http://www.psdcovers.com/mug003/#more" target="_blank">Download/Link</a><a href="http://www.behance.net/gallery/STARBUCKS-Style-Mockup-%28Free%29/3858585"> </a> <hr class="separator" /><h4>Designer Poster Mock-Up</h4><div style="text-align: center;"><a href="http://bluemonkeylab.com/portfolio/free-flyer-poster-mock-up/" target="_blank"><img alt="Poster_Mockup2" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/Poster_Mockup2.jpg" /></a></div><a class="btn sunset small" href="http://bluemonkeylab.com/portfolio/free-flyer-poster-mock-up/" target="_blank">Download/Link</a><a href="http://bluemonkeylab.com/portfolio/free-flyer-poster-mock-up/"> </a> <hr class="separator" /><h4>Retro DVD and Envelope Mock-Up</h4><div style="text-align: center;"><a href="http://graphicburger.com/dvd-envelope-mock-up/" target="_blank"><img alt="DVD-mock-up" class="aligncenter wp-image-4954" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/DVD-mock-up.jpg" /></a></div><a class="btn sunset small" href="http://graphicburger.com/dvd-envelope-mock-up/" target="_blank">Download/Link</a><a href="http://graphicburger.com/dvd-envelope-mock-up/"> </a> <hr class="separator" /><h4>Hard-Cover Book Perspective Mock-Up</h4><div style="text-align: center;"><a href="http://www.psdcovers.com/hardcover007/" target="_blank"><img alt="hardcover-mockup" class="aligncenter wp-image-8048" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/hardcover-mockup.jpg" /></a></div><a class="btn sunset small" href="http://www.psdcovers.com/hardcover007/" target="_blank">Download/Link</a><a href="http://graphicburger.com/dvd-envelope-mock-up/"> </a> <hr class="separator" /><h4>Hard-Cover Book Mock-Up</h4><div style="text-align: center;"><a href="http://inspirationhut.net/design-resources/free-magazine-book-front-cover-mock-up-template-psd-file/" target="_blank"><img alt="book-mockup" class="aligncenter wp-image-5016" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/book-mockup.jpg" /></a></div><a class="btn sunset small" href="http://inspirationhut.net/design-resources/free-magazine-book-front-cover-mock-up-template-psd-file/" target="_blank">Download/Link</a><a href="http://inspirationhut.net/design-resources/free-magazine-book-front-cover-mock-up-template-psd-file/"> </a> <hr class="separator" /><h4>Catalog Mock-up</h4><div style="text-align: center;"><a href="http://www.pixeden.com/psd-mock-up-templates/psd-catalog-mock-up-template" target="_blank"><img alt="catalogue-mockup" class="aligncenter wp-image-4914" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/catalogue-mockup.jpg" /></a></div><a class="btn sunset small" href="http://www.pixeden.com/psd-mock-up-templates/psd-catalog-mock-up-template" target="_blank">Download/Link</a> <hr class="separator" /><h4>Open Magazine Mock-Up</h4><div style="text-align: center;"><a href="http://www.psdcovers.com/mag004/" target="_blank"><img alt="magazine-mockup2" class="aligncenter wp-image-4933" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/magazine-mockup2.jpg" /></a></div><a class="btn sunset small" href="http://www.psdcovers.com/mag004/" target="_blank">Download/Link</a><a href="http://www.psdcovers.com/mag004/"> </a> <hr class="separator" /><h4>Magazine Layout and Mock-up</h4><div style="text-align: center;"><a href="http://freegraphicdesign.net/work/free-magazine-page-layout-mock-up" target="_blank"><img alt="magazine-mockup" class="aligncenter wp-image-4912" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/magazine-mockup.jpg" /></a></div><a class="btn sunset small" href="http://freegraphicdesign.net/work/free-magazine-page-layout-mock-up/" target="_blank">Download/Link</a><a href="http://freegraphicdesign.net/work/free-magazine-page-layout-mock-up"> </a> <hr class="separator" /><h4>Open Book Mock-Up</h4><div style="text-align: center;"><a href="http://www.designkindle.com/2011/05/18/open-book-mockup/" target="_blank"><img alt="open-book-mockup" class="aligncenter wp-image-4918" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/open-book-mockup.jpg" /></a></div><a class="btn sunset small" href="http://www.designkindle.com/2011/05/18/open-book-mockup/" target="_blank">Download/Link</a> <hr class="separator" /><h4>Bifold Brochure Mock-Up</h4><div style="text-align: center;"><a href="http://www.pixeden.com/psd-mock-up-templates/psd-bifold-brochure-mock-up-template" target="_blank"><img alt="bifold-brochure-mockup" class="aligncenter wp-image-4909" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/bifold-brochure-mockup.jpg" /></a></div><a class="btn sunset small" href="http://www.pixeden.com/psd-mock-up-templates/psd-bifold-brochure-mock-up-template/" target="_blank">Download/Link</a><a href="http://www.pixeden.com/psd-mock-up-templates/psd-bifold-brochure-mock-up-template"> </a> <hr class="separator" /><h4>Tri-Fold Brochure Mock-up</h4><div style="text-align: center;"><a href="http://originalmockups.com/mockups/print/trifold-brochure-mockup-01" target="_blank"><img alt="Tri-Fold-Brochure-Mockup" class="aligncenter wp-image-8010" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/Tri-Fold-Brochure-Mockup.jpg" /></a></div><a class="btn sunset small" href="http://originalmockups.com/mockups/print/trifold-brochure-mockup-01/" target="_blank">Download/Link</a><a href="http://www.pixeden.com/psd-mock-up-templates/psd-bifold-brochure-mock-up-template"> </a> <hr class="separator" /><h4>Flyer Poster Mockup Vol.1</h4><div style="text-align: center;"><img alt="free-flyer-mockup" class="aligncenter wp-image-8009" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/free-flyer-mockup.jpg" /></div><a class="btn sunset small" href="http://carlosviloria.com/2012/01/flyer-poster-mockup-free-psd/" target="_blank">Download/Link</a><a href="http://www.pixeden.com/psd-mock-up-templates/psd-bifold-brochure-mock-up-template"> </a> <hr class="separator" /><h4>A4 Page Mock-Up</h4><div style="text-align: center;"><a href="http://www.pixeden.com/psd-mock-up-templates/psd-a4-paper-mock-up-vol2" target="_blank"><img alt="A4-mock-up" class="aligncenter wp-image-4906" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/A4-mock-up.jpg" /></a></div><a class="btn sunset small" href="http://www.pixeden.com/psd-mock-up-templates/psd-a4-paper-mock-up-vol2" target="_blank">Download/Link</a> <hr class="separator" /><h4>Angled Tri-Fold Brochure</h4><div style="text-align: center;"><a href="http://www.psdcovers.com/brochure017/" target="_blank"><img alt="angled-trifold" class="aligncenter wp-image-8047" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/angled-trifold.jpg" /></a></div><a class="btn sunset small" href="http://www.psdcovers.com/brochure017/" target="_blank">Download/Link</a> <hr class="separator" /><h4>17 Logo Mockup (Psd)</h4><div style="text-align: center;"><a href="http://www.blugraphic.com/2013/07/08/17-logo-mockup-psd/" target="_blank"><img alt="17-logo-mockups" class="aligncenter wp-image-8013" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/17-logo-mockups.jpg" /></a></div><a class="btn sunset small" href="http://www.blugraphic.com/2013/07/08/17-logo-mockup-psd/" target="_blank">Download/Link</a> <hr class="separator" /><h4>Realistic Logo Mock-Up</h4><div style="text-align: center;"><a href="http://medialoot.com/item/realistic-logo-mock-ups/" target="_blank"><img alt="logo-mockup2" class="aligncenter wp-image-4916" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/logo-mockup2.jpg" /></a></div><a class="btn sunset small" href="http://medialoot.com/item/realistic-logo-mock-ups/" target="_blank">Download/Link</a><a href="http://medialoot.com/item/realistic-logo-mock-ups/"> </a> <hr class="separator" /><h4>Cutout Logo Mock-Up</h4><div style="text-align: center;"><a href="http://graphicburger.com/cutout-logo-mock-up/" target="_blank"><img alt="cutout-logo-mockpup" class="aligncenter wp-image-4949" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/cutout-logo-mockpup.jpg" /></a></div><a class="btn sunset small" href="http://graphicburger.com/cutout-logo-mock-up/" target="_blank">Download/Link</a><a href="http://graphicburger.com/cutout-logo-mock-up/"> </a> <hr class="separator" /><h4>Logo Mock-Up</h4><div style="text-align: center;"><a href="http://softarea.deviantart.com/art/Elegant-Metallic-Logo-Mockup-PSD-353274500" target="_blank"><img alt="logo-mockup" class="aligncenter wp-image-4904" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/logo-mockup.jpg" /></a></div><a class="btn sunset small" href="http://softarea.deviantart.com/art/Elegant-Metallic-Logo-Mockup-PSD-353274500" target="_blank">Download/Link</a><a href="http://softarea.deviantart.com/art/Elegant-Metallic-Logo-Mockup-PSD-353274500"> </a> <hr class="separator" /><h4>3D Wall Logo MockUp</h4><div style="text-align: center;"><img alt="3D wall mock-uo" class="aligncenter wp-image-7651" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/3D-wall-mock-uo.jpg" /></div><a class="btn sunset small" href="http://graphicburger.com/3d-wall-logo-mock-up/" target="_blank">Download/Link</a><a href="http://softarea.deviantart.com/art/Elegant-Metallic-Logo-Mockup-PSD-353274500"> </a> <hr class="separator" /><h4>Stack Business Card MockUp</h4><div style="text-align: center;"><a href="http://graphicburger.com/stack-business-card-mock-up/" target="_blank"><img alt="smart-business-card-PSD" class="aligncenter wp-image-8036" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/smart-business-card-PSD.jpg" /></a></div><a class="btn sunset small" href="http://graphicburger.com/stack-business-card-mock-up/" target="_blank">Download/Link</a><a href="http://softarea.deviantart.com/art/Elegant-Metallic-Logo-Mockup-PSD-353274500"> </a> <hr class="separator" /><h4>Business Card Mock-Up</h4><div style="text-align: center;"><a href="http://freegraphicdesign.net/work/free-business-card-mock-up/" target="_blank"><img alt="businescard-mockup" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/businescard-mockup.jpg" /></a></div><a class="btn sunset small" href="http://freegraphicdesign.net/work/free-business-card-mock-up/" target="_blank">Download/Link</a><a href="http://freegraphicdesign.net/work/free-business-card-mock-up/"> </a> <hr class="separator" /><h4>Vertical Business Card Mock-Up</h4><div style="text-align: center;"><a href="http://dribbble.com/shots/579868-Free-PSD-Verticle-Business-Cards-Mockup/attachments/44963" target="_blank"><img alt="business-card-mockup4" class="aligncenter wp-image-4979" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/business-card-mockup4.jpg" /></a></div><a class="btn sunset small" href="http://dribbble.com/shots/579868-Free-PSD-Verticle-Business-Cards-Mockup/attachments/44963" target="_blank">Download/Link</a><a href="http://dribbble.com/shots/579868-Free-PSD-Verticle-Business-Cards-Mockup/attachments/44963"> </a> <hr class="separator" /><h4>Business Card Mockup</h4><div style="text-align: center;"><a href="http://originalmockups.com/mockups/print/business-card-mockup-01" target="_blank"><img alt="Business-Card-Mockup-02" class="aligncenter wp-image-8037" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/Business-Card-Mockup-02.jpg" /></a></div><a class="btn sunset small" href="http://originalmockups.com/mockups/print/business-card-mockup-01" target="_blank">Download/Link</a><a href="http://dribbble.com/shots/579868-Free-PSD-Verticle-Business-Cards-Mockup/attachments/44963"> </a> <hr class="separator" /><h4>Retro Business Card</h4><div style="text-align: center;"><a href="http://www.pixeden.com/business-cards-templates/retro-business-card" target="_blank"><img alt="Business-Card-Mockup-05" class="aligncenter wp-image-8040" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/Business-Card-Mockup-05.jpg" /></a></div><a class="btn sunset small" href="http://www.pixeden.com/business-cards-templates/retro-business-card" target="_blank">Download/Link</a><a href="http://dribbble.com/shots/579868-Free-PSD-Verticle-Business-Cards-Mockup/attachments/44963"> </a> <hr class="separator" /><h4>Free Business Card Mockup</h4><div style="text-align: center;"><a href="http://bluemonkeylab.com/portfolio/free-business-card-mockup/" target="_blank"><img alt="Business-Card-Mockup-06" class="aligncenter wp-image-8041" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/Business-Card-Mockup-06.jpg" /></a></div><a class="btn sunset small" href="http://bluemonkeylab.com/portfolio/free-business-card-mockup/" target="_blank">Download/Link</a><a href="http://dribbble.com/shots/579868-Free-PSD-Verticle-Business-Cards-Mockup/attachments/44963"> </a> <hr class="separator" /><h4>Textured Business Card Mock-Up</h4><div style="text-align: center;"><a href="http://dribbble.com/shots/782047-Free-Card-Flyer-mock-ups-Psd-files-in-high-res" target="_blank"><img alt="business-card-mockup3" class="aligncenter wp-image-4977" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/business-card-mockup3.jpg" /></a></div><a class="btn sunset small" href="http://dribbble.com/shots/782047-Free-Card-Flyer-mock-ups-Psd-files-in-high-res" target="_blank">Download/Link</a><a href="http://dribbble.com/shots/782047-Free-Card-Flyer-mock-ups-Psd-files-in-high-res"> </a> <hr class="separator" /><h4>Clean Business Card Mock-Up</h4><div style="text-align: center;"><a href="http://www.pixeden.com/psd-mock-up-templates/psd-business-card-mock-up-vol-2" target="_blank"><img alt="business-card-mockup2" class="aligncenter wp-image-4962" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/business-card-mockup2.jpg" /></a></div><a class="btn sunset small" href="http://www.pixeden.com/psd-mock-up-templates/psd-business-card-mock-up-vol-2" target="_blank">Download/Link</a><a href="http://www.pixeden.com/psd-mock-up-templates/psd-business-card-mock-up-vol-2"> </a> <hr class="separator" /><h4>Photo-Realistic Business Card Mock-Up</h4><div style="text-align: center;"><a href="http://graphicburger.com/realistic-business-card-mock-up/" target="_blank"><img alt="photorealistic-business-card-mockup" class="aligncenter wp-image-4935" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/photorealistic-business-card-mockup.jpg" /></a></div><a class="btn sunset small" href="http://graphicburger.com/realistic-business-card-mock-up/" target="_blank">Download/Link</a><a href="http://graphicburger.com/realistic-business-card-mock-up/"> </a> <hr class="separator" /><h4>Business Card Mockup Vol. 1 (Free PSD)</h4><div style="text-align: center;"><a href="http://carlosviloria.com/2012/01/business-card-mockup-vol-1/" target="_blank"><img alt="Business-Card-Mockup-04" class="aligncenter wp-image-8039" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/Business-Card-Mockup-04.jpg" /></a></div><a class="btn sunset small" href="http://carlosviloria.com/2012/01/business-card-mockup-vol-1/" target="_blank">Download/Link</a><a href="http://graphicburger.com/realistic-business-card-mock-up/"> </a> <hr class="separator" /><h4>Business Card Textured PSD</h4><div style="text-align: center;"><a href="http://carlosviloria.com/2012/02/business-card-retro-badge/" target="_blank"><img alt="Business-Card-Mockup-03" class="aligncenter wp-image-8038" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/Business-Card-Mockup-03.jpg" /></a></div><a class="btn sunset small" href="http://carlosviloria.com/2012/02/business-card-retro-badge/" target="_blank">Download/Link</a><a href="http://graphicburger.com/realistic-business-card-mock-up/"> </a> <hr class="separator" /><h4>Creative Business Card Vol 3</h4><div style="text-align: center;"><a href="http://www.pixeden.com/business-cards-templates/creative-business-card-vol-3" target="_blank"><img alt="Business-Card-Mockup-07" class="aligncenter wp-image-8042" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/Business-Card-Mockup-07.jpg" /></a></div><a class="btn sunset small" href="http://www.pixeden.com/business-cards-templates/creative-business-card-vol-3" target="_blank">Download/Link</a><a href="http://graphicburger.com/realistic-business-card-mock-up/"> </a> <hr class="separator" /><h4 id="screenshot-title">Free Textured Business Card Mockup</h4><div style="text-align: center;"><a href="http://dribbble.com/shots/1080035-Free-Mockup" target="_blank"><img alt="Business-Card-Mockup-08" class="aligncenter wp-image-8043" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/Business-Card-Mockup-08.jpg" /></a></div><a class="btn sunset small" href="http://dribbble.com/shots/1080035-Free-Mockup" target="_blank">Download/Link</a><a href="http://graphicburger.com/realistic-business-card-mock-up/"> </a> <hr class="separator" /><h4>Dark Branding Mock-Up</h4><div style="text-align: center;"><a href="http://www.behance.net/gallery/Photoshop-Stationery-Branding-Identity-Mock-up/7690717" target="_blank"><img alt="dark-branding-mock-up" class="aligncenter wp-image-4970" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/dark-branding-mock-up.jpg" /></a></div><a class="btn sunset small" href="http://www.behance.net/gallery/Photoshop-Stationery-Branding-Identity-Mock-up/7690717" target="_blank">Download/Link</a><a href="http://www.behance.net/gallery/Photoshop-Stationery-Branding-Identity-Mock-up/7690717"> </a> <hr class="separator" /><h4>Branding / Identity MockUp Vol.5</h4><div style="text-align: center;"><img alt="brand-identity-mockup" class="aligncenter wp-image-7650" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/brand-identity-mockup.jpg" /></div><a class="btn sunset small" href="http://graphicburger.com/branding-identity-mock-up-vol-5/" target="_blank">Download/Link</a><a href="http://www.behance.net/gallery/Photoshop-Stationery-Branding-Identity-Mock-up/7690717"> </a> <hr class="separator" /><h4>Retail Brand Identity Mock-Up</h4><div style="text-align: center;"><a href="http://bluemonkeylab.com/portfolio/free-jack-son-identity/" target="_blank"><img alt="brandmock-up5" class="aligncenter wp-image-5021" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/brandmock-up5.jpg" /></a></div><a class="btn sunset small" href="http://bluemonkeylab.com/portfolio/free-jack-son-identity/" target="_blank">Download/Link</a><a href="http://bluemonkeylab.com/portfolio/free-jack-son-identity/"> </a> <hr class="separator" /><h4>Branding / Identity MockUp</h4><div style="text-align: center;"><img alt="app-screen-perspective-5" class="aligncenter wp-image-7649" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/app-screen-perspective-5.jpg" /></div><a class="btn sunset small" href="http://graphicburger.com/branding-identity-mock-up-vol-4/" target="_blank">Download/Link</a><a href="http://bluemonkeylab.com/portfolio/free-jack-son-identity/"> </a> <hr class="separator" /><h4>Professional Branding Stationery Mock-Up</h4><div style="text-align: center;"><a href="http://graphicburger.com/branding-identity-mock-up-vol-2/" target="_blank"><img alt="sleek-stationery-mock-up" class="aligncenter wp-image-4953" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/sleek-stationery-mock-up.jpg" /></a></div><a class="btn sunset small" href="http://graphicburger.com/branding-identity-mock-up-vol-2/" target="_blank">Download/Link</a><a href="http://graphicburger.com/branding-identity-mock-up-vol-2/"> </a> <hr class="separator" /><h4>Brand Stationery Mock-Up</h4><div style="text-align: center;"><a href="http://graphicburger.com/identity-branding-mock-up-vol-3/" target="_blank"><img alt="branding-stationary-mock-up" class="aligncenter wp-image-4940" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/branding-stationary-mock-up.jpg" /></a></div><a class="btn sunset small" href="http://graphicburger.com/identity-branding-mock-up-vol-3/" target="_blank">Download/Link</a><a href="http://graphicburger.com/identity-branding-mock-up-vol-3/"> </a> <hr class="separator" /><h4>Corporate Branding Mock-Up</h4><a href="http://www.graphicsfuel.com/2013/05/corporate-branding-mockup-vol-1-psd/" target="_blank"><img alt="corporate-branding-mockup" class="aligncenter" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/corporate-branding-mockup.jpg" /></a> <a class="btn sunset small" href="http://www.graphicsfuel.com/2013/05/corporate-branding-mockup-vol-1-psd/" target="_blank">Download/Link</a><a href="http://www.graphicsfuel.com/2013/05/corporate-branding-mockup-vol-1-psd/"> </a> <hr class="separator" /><h4>Brand Identity Mock-Up</h4><div style="text-align: center;"><a href="http://graphicburger.com/branding-identity-mock-up/" target="_blank"><img alt="Branding-Identity-Mockup-full2" class="aligncenter wp-image-4947" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/Branding-Identity-Mockup-full2.jpg" /></a></div><a class="btn sunset small" href="http://graphicburger.com/branding-identity-mock-up/" target="_blank">Download/Link</a><a href="http://graphicburger.com/branding-identity-mock-up/"> </a> <hr class="separator" /><h4>Full Branding Identity Mockup</h4><div style="text-align: center;"><a href="http://www.techandall.com/full-branding-identity-mockup/" target="_blank"><img alt="brand-identity-mockup-black" class="aligncenter wp-image-8012" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/brand-identity-mockup-black.jpg" /></a></div><a class="btn sunset small" href="http://www.techandall.com/full-branding-identity-mockup/" target="_blank">Download/Link</a><a href="http://graphicburger.com/branding-identity-mock-up/"> </a> <hr class="separator" /><h4>Model T-Shirt Mock-Up</h4><div style="text-align: center;"><a href="http://www.pixeden.com/psd-mock-up-templates/tshirt-mockup-template-psd" target="_blank"><img alt="tshirt-mockup" class="aligncenter wp-image-4964" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/tshirt-mockup.jpg" /></a></div><div style="text-align: left;"><a class="btn sunset small" href="http://www.pixeden.com/psd-mock-up-templates/tshirt-mockup-template-psd" target="_blank">Download/Link</a><a href="http://www.pixeden.com/psd-mock-up-templates/tshirt-mockup-template-psd"> </a></div><div style="text-align: left;"></div><hr class="separator" /><h4 style="text-align: left;">Free T-Shirt PSD</h4><div style="text-align: center;"><a href="http://freepsdfiles.net/fashion/psd-tee-shirt-mockup-templates/" target="_blank"><img alt="free-tshirt-psd" class="aligncenter wp-image-8014" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/free-tshirt-psd.jpg" /></a></div><a class="btn sunset small" href="http://freepsdfiles.net/fashion/psd-tee-shirt-mockup-templates/" target="_blank">Download/Link</a><a href="http://www.pixeden.com/psd-mock-up-templates/tshirt-mockup-template-psd"> </a> <hr class="separator" /><h4>T-Shirt Mockup using SmartObject .PSD</h4><div style="text-align: center;"><a href="http://www.techandall.com/t-shirt-mockup-using-smartobject-psd/" target="_blank"><img alt="PSD-Tee-Shirt-Mockup-Templates2" class="aligncenter wp-image-8015" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/PSD-Tee-Shirt-Mockup-Templates2.jpg" /></a></div><a class="btn sunset small" href="http://www.techandall.com/t-shirt-mockup-using-smartobject-psd/" target="_blank">Download/Link</a><a href="http://www.pixeden.com/psd-mock-up-templates/tshirt-mockup-template-psd"> </a> <hr class="separator" /><h4>T-Shirt PSD</h4><div style="text-align: center;"><a href="http://grahamphisherdotcom.deviantart.com/art/T-Shirt-PSD-138392925" target="_blank"><img alt="PSD-Tee-Shirt-Mockup-Templates3" class="aligncenter wp-image-8016" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/PSD-Tee-Shirt-Mockup-Templates3.jpg" /></a></div><a class="btn sunset small" href="http://grahamphisherdotcom.deviantart.com/art/T-Shirt-PSD-138392925" target="_blank">Download/Link</a><a href="http://www.pixeden.com/psd-mock-up-templates/tshirt-mockup-template-psd"> </a> <hr class="separator" /><h4>Blank T-Shirt Mockup Template (PSD)</h4><div style="text-align: center;"><a href="http://softarea.deviantart.com/art/Blank-T-Shirt-Mockup-Template-PSD-378577552" target="_blank"><img alt="PSD-Tee-Shirt-Mockup-Templates5" class="aligncenter wp-image-8019" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/07/PSD-Tee-Shirt-Mockup-Templates5.jpg" /></a></div><a class="btn sunset small" href="http://softarea.deviantart.com/art/Blank-T-Shirt-Mockup-Template-PSD-378577552" target="_blank">Download/Link</a><a href="http://www.pixeden.com/psd-mock-up-templates/tshirt-mockup-template-psd"> </a> <hr class="separator" /><div style="text-align: left;">Which mock-up is your favourite? Will you be using any of these for your projects? Let us know in the comments section below. </div></div>

150+ Best Free PSD Mock-Ups for Designers

Mock-ups are an essential part of any good designers creative repertoire. Our ideas and work may be great, but ultimately if not presented...

+ Read more »