Tutorials

Beginning With WordPress: First Steps With Your New Website

Well… would you look at at that… a whole new WordPress site! Clever you! Have you logged in yet? If so, you might be sitting looking at the Dashboard wondering what the heck you do next… so, let me help you with that! (Failing that you’re wondering what on earth a Dashboard is, that’s ok,… Continue reading Beginning With WordPress: First Steps With Your New Website

Create a slide-out footer with this neat z-index trick

In this short tutorial, we are going to create an interesting slide-out footer with a bit of CSS. Grab the zip from the download button above, open it in your favorite code editor and read on! The Idea The effect we are after, is to give the impression that the page lifts up to reveal… Continue reading Create a slide-out footer with this neat z-index trick

How to build standards-compliant responsive design using @viewport

One of the key concepts in any responsive design is the change of viewport size. That’s because mobile viewports vary greatly from desktop viewports. To control the viewport size we traditionally use the viewport meta tag. However, the viewport meta tag, like all the worst browser developments of the last forever, isn’t W3C valid. It… Continue reading How to build standards-compliant responsive design using @viewport

Create a Geometric Kermit the Frog Illustration in Adobe Illustrator

Final Product What You’ll Be Creating In this tutorial, I am going to draw Kermit (known in Mexico as “La Rana René”) by using simple shapes and basic tools in Adobe Illustrator. I’ll also show you how to modify your colors in the blink of an eye! So let’s get started… 1. Create a New Document… Continue reading Create a Geometric Kermit the Frog Illustration in Adobe Illustrator

Smartimage: Management of Brand Files, Simplified

I was in dire need of a good tool to handle my images, so I started scanning the internet for a solution that is both convenient and simple to use. Quite a few alternatives presented themselves, but one of them really stood out after I started using the free trial. So, here’s how it went with Smartimage. It… Continue reading Smartimage: Management of Brand Files, Simplified

Web Assets – Tips for Better Organization and Performance

Remember back to when we had to spend a lot of time optimizing our project’s assets (images, CSS, etc..)? Well today, users have a much faster Internet connection and it appears that we can afford to use bigger images or bigger flash files with a lot of video and pictures inside. However, with the rise… Continue reading Web Assets – Tips for Better Organization and Performance

How To Make a Letterpress Texture Effect in Photoshop

I’ve received a few questions recently about how I create the letterpress style texturing that appears on pretty much every retro/vintage design I make. Today’s tutorial will show you a quick and easy way to give your logos and typography that ink stamp style effect that originated from the old letterpress style printing technique. … Continue reading How To Make a Letterpress Texture Effect in Photoshop

Improving Layout With Vertical Rhythm

Learning all about the ins and outs of the technical side of typography is good. It will give you a solid grounding when looking for typefaces or fonts and will help you understand a little more about the art of typography itself. You’ll soon realise how much hard work it takes to get type right… Continue reading Improving Layout With Vertical Rhythm

Create Unique Floating Rock Typography in Photoshop

In this tutorial, I will show you the process of Creating this Unique Floating Rock Typography in Photoshop. You will learn a number of brush tricks, image adjustment tips and practice your selection techniques. This is an intermediate level tutorial so some steps can be tricky, but why not have a try! Note: The Photoshop… Continue reading Create Unique Floating Rock Typography in Photoshop

Build a Dynamic Dashboard with ChartJS

Final Product What You’ll Be Creating DownloadSOURCE FILES DemoVIEW IT ONLINE Today we will be creating a dynamic dashboard with live charts, through the power of ChartJS. ChartJS is a powerful, dependency free JavaScript library which builds graphs via the canvas element. Best of all, it’s easy for designers to get up and running. We’ll be focusing… Continue reading Build a Dynamic Dashboard with ChartJS

Ultimate Collection of Fresh Adobe Photoshop Tutorials

Photoshop is forever paradise in digital designing world and an every designer’s best friend. Since the mark of its introduction in designing field, Photoshop has been in a constant spotlight of excellence, extensively utilized by everyone linked with digital designing no matter how. Whether its retouching or manipulations, matte painting, illustrations, texturing, designing of packages, logos,… Continue reading Ultimate Collection of Fresh Adobe Photoshop Tutorials

Adobe Illustrator CS6 Shortcuts Cheat Sheet

Illustrator is a very important tool for designers and creative professionals. And no matter how familiar you are with it, there are always some shortcuts you could learn to be more productive. This is why you will love today’s exclusive Adobe Illustrator CS6 cheat sheet that the good people at ZeroLag have put together for WDL. How to… Continue reading Adobe Illustrator CS6 Shortcuts Cheat Sheet

10 Useful Tips For Debugging and Troubleshooting in Programming

With a shiny new file open in the text editor and not a line of code written, every new project seems full of possibility and promise. Several thousands of lines of code later, that same project can seem weighed down by bugs that make adding new features a pain, and drain the enthusiasm of programmers.… Continue reading 10 Useful Tips For Debugging and Troubleshooting in Programming

45 Fresh And Useful Photoshop Tutorials

Here we have come up with another fresh collection of some high quality and very useful Adobe Photoshop tutorials that have been released in last few months. There is no second opinion that Adobe Photoshop is the most powerful and necessary tool for designing and you cannot complete your designing work without using Adobe Photoshop.… Continue reading 45 Fresh And Useful Photoshop Tutorials

10 Advanced Photoshop Tutorials for Lighting Effects

There is an open area in Photoshop to experiment with some amazing effects. You can play with any image in Photoshop creating some Lighting Effects which can be used in your upcoming print or web design. This article provides some Advanced Photoshop Tutorials for Lighting Effects. Advanced Glow Effects Show me the light –… Continue reading 10 Advanced Photoshop Tutorials for Lighting Effects

Building a Circular Navigation with CSS Transforms

VIEW DEMO DOWNLOAD SOURCE In this tutorial I’m going to show you how to create circular navigations using CSS transforms. I’m going to take you through the steps for creating these styles one by one, and explain the math (yikes!) and simple logic behind them so you get a clear understanding of the technique. Like I… Continue reading Building a Circular Navigation with CSS Transforms

Create an Awesome Single-Page Website

Not every website needs to be complex or include multiple pages of content and information. Sometimes one page is enough. But just because you are creating a website with only one page, does not mean that it will be easy. Developing a single-page layout can require just as much thought and planning as some more complex… Continue reading Create an Awesome Single-Page Website

Add Depth to Flat UI with Flat Shadow.js

A while ago, I stumbled upon a post called Flat design casts a long shadow by the fine folks at Web Designer Depot and I was amazed by how adding a simple shadow could create such a beautiful depth of design to the flat UI elements. What if we bring this effect to the web? Today, let… Continue reading Add Depth to Flat UI with Flat Shadow.js

Useful Hacks to Make WordPress Work Better

If you came here looking for ways to break into someone’s WordPress site, you choose the wrong definition of the word hack. No, this article is all about ways to make WordPress work better for you and your visitors by getting your hands dirty with WordPress’ actual code, you know the functions.php files, .htaccess and… Continue reading Useful Hacks to Make WordPress Work Better

CSS3 Menu Tutorial : Cool Bouncing Effects

In this tutorial I will show you how to create CSS3 menu with bouncing effect. In thisCSS3 menu tutorial we will use keyframes to apply bouncing effect on menu. With thekeyframes rule, you can create animation. During animation you can change the style as much as you want. As you know how important is menu navigation on… Continue reading CSS3 Menu Tutorial : Cool Bouncing Effects

How To Design a Responsive Site Correctly

Businesses must decide whether to build a native mobile apps or a responsive site for their digital presences. Should you invest in separate iOS and Android development or simply design a site that works across all devices? If you opt to build out a responsive site, here are some best practices to make your design seamless on… Continue reading How To Design a Responsive Site Correctly

CSS 3D Image Flip Gallery With Dynamic Shadows

My recent book Pro CSS3 Animation walked the reader through a simple version of a 3D flip image gallery. After publication, I wanted to take it further: thus, this article. The UI challenge addressed here is the same focused on in many of my other CSS 3Dworks, such as the Origami UI: we live in a world of increasingly diversified… Continue reading CSS 3D Image Flip Gallery With Dynamic Shadows

How To Create a Set of Vector Weather Line Icons

Stroked line icons really complement a flat interface style with their minimal and basic appearance. Let’s take a look at building a set of stylised vector icons of our own. We’ll base them on the weather to allow us to create a set of consistently styled icons that would be a perfect match for a… Continue reading How To Create a Set of Vector Weather Line Icons

Tutorial: How To Build Input Fields with Tag-Style Item Blocks

Many newer social media communities and web applications are pushing the boundaries of interface design. Form inputs have changed a lot over just the past 4-5 years. One such feature is the tag select input field, where users can enter tags which appear as block items within the field itself. For this tutorial I want… Continue reading Tutorial: How To Build Input Fields with Tag-Style Item Blocks