Category: Tutorials

You learn something everyday if you pay attention

Vizualize Your Resume in a Whole New Way

As a freelance writer, it seems like I’m always sending my resume out. Sometimes this causes some issues, usually with file compatability. I try to send a PDF, but this doesn’t always eradicate the problems and my resume isn’t always viewed the way it’s meant to be. Due to these issues, I’ve been searching for… Continue reading Vizualize Your Resume in a Whole New Way

Building Icons With a Single HTML Element

With the arrival of ultra high definition screens (think Retina) new design challenges have arisen; we need to find ways to accomodate all devices. Take displaying icons for example. We could lean on serving images at 200%,or using SVG,but it’s also possible to build a surprising amount of graphics with CSS alone. Let’s build an… Continue reading Building Icons With a Single HTML Element

Spectragram – An Easy jQuery Plugin for Instagram API

Spectragram is an easy jQuery plugin for Instagram API to fetch and display user, popular or tags photo feeds inside your web application or site. You can get get the most recent media published by a user, the most popular media at the moment, or recently tagged media from Instagram API. You can display the… Continue reading Spectragram – An Easy jQuery Plugin for Instagram API

Create Digital Invitations To Any Event With Erly

In this digital age, inviting friends and family to a special occasion is now as easy as sending them an email or a link to a web page. For those who prefer a modern way of sending invites as opposed to the more traditional ones sent by post, Erly is a great option. The web… Continue reading Create Digital Invitations To Any Event With Erly

3D Pop Up Effect In Photoshop

In this Photoshop tutorial, we’ll learn how to create a fun 3D pop-up effect, similar a children’s pop-up book, where the main subject of your photo appears to be standing up and popping right out of an otherwise flat image. To add even more of a 3D look to it, we’ll be curling the edges… Continue reading 3D Pop Up Effect In Photoshop

Live Album Previews with CSS3 and jQuery

Today we are going to make a script for previewing the contents of an album with a slideshow-like animation. This can be used in photo galleries, online shops, profile pages and more. The example is inspired by Facebook, where you hover over an album and get a slideshow of some of the photos contained inside it. Let’s… Continue reading Live Album Previews with CSS3 and jQuery

How to Create a Simple Multi-Item Slider

For today’s tutorial we want to show you how to create a simple item slider with CSS animations and some jQuery. The idea was inspired by the Aplle product slider where several little items fly in with a bouncing animation. We wanted to translate this concept to a modern-looking alternative for a minimal online store… Continue reading How to Create a Simple Multi-Item Slider

Removing a head from an image for a great effect – Photoshop Tutorial

Tutorial Details Requirements: Photoshop CS2 and newer Difficulty: Intermediate Estimated Completetion Time: 1 hour In this tutorial we will learn how to remove someone’s head and replace it with object in the background. It does not only apply to heads but to all kinds of objects so you can remove them and replace with a… Continue reading Removing a head from an image for a great effect – Photoshop Tutorial

Create a Beautiful Password Strength Meter

In this tutorial we will be creating a beautiful password strength indicator. It will determine the complexity of a password and move a meter accordingly with the help of the new Complexify jQuery plugin. Only when a sufficiently complex password is entered, will the user be able to continue with their registration. A PSD file is also… Continue reading Create a Beautiful Password Strength Meter

Quick Tip: Precision Colour Control in Photoshop

In this quick tip, I’ll show you a simple and easy way to take control of the colours in your Photoshop documents using the power of adjustment layers. We will consider two scenarios, with the second being somewhat more complex than the first. I’m always preaching about the importance of non-destructive editing in Photoshop, and… Continue reading Quick Tip: Precision Colour Control in Photoshop

Letterpress and Letter Bulge Effect using Photoshop and CS5.5

Design trend has changed a lot, now a days most of the designers prefer modern techniques while they design for their clients. And the clients also prefer that too. So the use of letterpress and letterbulge effects are very common now a days. It’s easy to design those effects in photoshop. But in earlier days… Continue reading Letterpress and Letter Bulge Effect using Photoshop and CS5.5

How to design a Minimalistic Blog Theme

Final Result Step 1: Create a new document Start by creating a new document in Photoshop with 1024px width and 1200px height. Step 2: Bokeh Background Image You can download this background image here or you can follow this tutorial to make your own. Step 3: Drawing the layout Grab the Rounded Rectangle Tool (Radius:… Continue reading How to design a Minimalistic Blog Theme

How to Make an Electronic Speaker in Photoshop

Today I am going to share with you that how to create an electronic speaker in Photoshop. You try this tutorial in Photoshop for enhance your skills with these new tricks and techniques. I hope you will create this tutorial on first priority. Feel free and share your comments with us. Create an Electronic Speaker… Continue reading How to Make an Electronic Speaker in Photoshop

Learn How To Create An Open Book In Photoshop

In todays tutorial I’ll be showing you how to create a sleek book with a nice leather textured background. Lets get started. What We’ll Be Creating Resources Used In This Tutorial Leather Texture Lets Get Started! Create a new document (Ctrl + N) 1200 x 800 pixels with any colored background. Open the leather texture… Continue reading Learn How To Create An Open Book In Photoshop

Carbon Fibre Style Metallic Icon Design

What We’ll Be Creating Lets Get Started! Create a new document (Ctrl + N) with the dimensions 800 x 600 pixels, change your background color to a color which will make the icon more visible. Select the “Rounded Rectangle Tool” (U) with a radius of 20px. Drag out a small rectangle in the middle of… Continue reading Carbon Fibre Style Metallic Icon Design

How to Draw a Colorful Fantasy Dragon Battle Scene in Photoshop

Learn how to take a drawing of a dragon and turn it into an amazing painting. This tutorial will show you how to use Photoshop to create shapes from a hand-drawn sketch, apply shading, then finish it by applying color and texture. After creating the dragon, you will learn learn how to create the starry… Continue reading How to Draw a Colorful Fantasy Dragon Battle Scene in Photoshop

Creating a Smoke Fading Effect

Creating a Smoke Fading Effect Preparations We will need a close up image of a model, and also the awesome Smoke Brushes Set 1 designed by Falln-Stock. Click here to download the brushes. Click here to download the model image. All rights of these resources belong to their respective owners.. Step 1 – Setting Up… Continue reading Creating a Smoke Fading Effect

Rain, Lightning, Furious Ocean: The Perfect Storm!

In this tutorial you will learn how to create a perfect storm scene. The tutorial is divided into 4 different parts, each teaching you how to create one of the 4 elements needed for the final image: Clouds, Lightning, Rain and Ocean. For this tutorial I preferred to create my original image much larger and… Continue reading Rain, Lightning, Furious Ocean: The Perfect Storm!

Glossy Text With Reflection

In this tutorial I will show you some very useful techniques for creating glossy text for the web. You can use such texts for Logos, also for some titles on clips and different kind of projects. There have a lots and different tutorials on the web about that. The difference in my tutorial is that… Continue reading Glossy Text With Reflection

Create A Realistic Water Text Effect

Step 1 – The Background We will be needing a nice background to write out text in water on. You can pretty much pick whatever background you like as long as it suites your needs. I will go ahead and use scratched metal background. Feel free to download the image: Step 2 – Font &… Continue reading Create A Realistic Water Text Effect

HTML5 & CSS3: Take Your Design to Another Level

While both languages for HTML5 and CSS3 aren’t fully complete yet, taking the time time to familiarize yourself with some of the pointers in this post can really help you achieve that clean look and feel for your site. Let’s take a deeper look at them. HTML5 HTML5 is the latest version of HTML or… Continue reading HTML5 & CSS3: Take Your Design to Another Level

3D Gallery with CSS3 and JQuery

With 3D transforms, we can make simple elements more interesting by setting them into three dimensional space. Together with CSS transitions, these elements can be moved in 3D space and create a realistic effect. Today, we want to share an experimental 3D gallery with you that uses CSS 3D transforms. The main idea is to… Continue reading 3D Gallery with CSS3 and JQuery

Page transitions with CSS3

MARKUP The HTML will contain five main divisions: a header and the four content sections. Each of the content sections is going to have an ID and the class panel. Moreover, we will add another division inside which will have the classcontent. The first content section which is #home will only have the content class and will not… Continue reading Page transitions with CSS3