Posts Tagged ‘Quick’
In today’s quick tip tutorial we will demonstrate how to create a cinematic “Transfarmers” Text Effect using the layer styles. Let’s get started! Tutorial Assets The following assets were used during the production of this tutorial. Transformers Solid font Dark Metal texture from Texturemate.com Brushed Metal Pattern Step 1 Make a new .PSD document, 1000 x 500 pixels, RGB color, 100 dpi and grey background (color #33333). Create a new layer and fill it with brushed metal pattern from tutorial assets section (any metal texture will do though). Now using the Blending Options, fill this layer with a Light Blue color and set the...
Read MoreSometimes, you don’t require a high-quality templating solution, but still need to keep from mixing lots of nasty HTML into your JavaScript. In these cases, a simple, makeshift templating system can go a long way. Choose 720p for the best clarity. Subscribe to our YouTube channel for more training. Final Source HTML <!doctype html public 'ahh hell yeah'> <html> <head> <meta charset=utf-8> <title>Simple Templating</title> </head> <body> <div class="result"></div> <script type="template" id="template"> <h2> <a href="{{href}}"> {{title}} </a> </h2> ...
Read MoreYou don’t have to search the web for very long to find a web ribbon in the corner of an image. In this quick tip tutorial we will show you how to create your own. Let’s get started! Tutorial Assets The following assets were used during the production of this tutorial. Chunk Five Font PSD Tuts+ Screenshot Step 1 Create a new document and name it “Ribbon”. For this example, we’ll do a 600×600 pixel canvas. Step 2 Create a new layer and name it “Background Texture”. Now fill it with a light color (I used #cccccc). Now go Filter > Noise > Add Noise and add...
Read MoreOne of my favorite new HTML5 tags, which has only recently been integrated into Chrome (as of version 12), is the details element. I’ll show you to use it in today’s quick tip. What Does the details Tag Do? It essentially allows us to show and hide content with the click of a button. You’re surely familiar with this type of effect, but, up until now, it had always been achieved with JavaScript. Imagine a heading with an arrow next to it, and when you click on it, additional information below becomes visible. Clicking the arrow again hides the content. This...
Read MoreDid you know that, with CSS, you can create a counter? This can be especially useful for instances where the count is purely needed for presentational purposes. I’ll show you how to use counter-increment in this useful quick tip. Screencast Choose 720p for the best picture. How Does it Work? It’s really quite simple. We’re not even talking CSS3 here; the counter-increment property has been around for a while now. It’s just that many of us aren’t familiar with it, or haven’t found a use for it. We begin by applying the...
Read More