Tutorials

Making the Most of Photoshop Layers

The way web designers are using Photoshop is changing; pixel perfect comps are less relevant than they were a year or two ago. However, Photoshop is still an invaluable design tool and using its features properly is as important as ever. The following tips will help you master working with layers. A Quick Word About… Continue reading Making the Most of Photoshop Layers

Interactive Infographic with SVG and CSS Animations

One of the less talked about features of newer browsers is increasing support for the SVG file format. If you are unfamiliar with SVG, it stands for Scalable Vector Graphics. Unlike raster image formats like PNG, JPG or GIF, the vector graphics contained within SVG files are completely scalable to any size and will display… Continue reading Interactive Infographic with SVG and CSS Animations

Adobe Improves 3D Functionality in Photoshop CS6.1

Adobe made some rather significant changes to its 3D features in Photoshop CS6. In CS6.1, they have made a handful of tweaks that you should be aware of. These new features include a way to generate bump map textures from flat artwork, using the Normals menu; smoother previewing of soft shadows; full-image ray tracing, replacing… Continue reading Adobe Improves 3D Functionality in Photoshop CS6.1

How to Make a Tumblr-powered News Ticker

Tumblr is a blogging service with an elegant interface for creating and publishing content. In this tutorial, we are going to use it as the foundation of a news publishing system. We are going to develop a simple widget which cycles through the most recent posts on a Tumblr blog, and presents them as news items… Continue reading How to Make a Tumblr-powered News Ticker

How to Utilize the Pattern Tool to Create a Pattern Brush in Illustrator CS6

One of my favorite new tools with Adobe Illustrator CS6 is the Pattern Tool. It’s great for creating complex seamless patterns in real time and gives you so many options. However it’s not so easy to create a Pattern Brush. Today’s Quick Tip tutorial is a bit of an experimental one, showing you how you… Continue reading How to Utilize the Pattern Tool to Create a Pattern Brush in Illustrator CS6

CSS: Responsive Navigation Menu

Previously I wrote a tutorial on how to make a mobile navigation for responsive design, now I’ve discovered a new technique to produce a responsive menu without having to use Javascript. It uses clean and semantic HTML5 markup. The menu can be aligned left, center or right. Unlike the previous tutorial where it is clicked… Continue reading CSS: Responsive Navigation Menu

How to Write Code That Embraces Change

Writing code, which is easy to change is the Holy Grail of programming. Welcome to programming nirvana! But things are much more difficult in reality: source code is difficult to understand, dependencies point in countless directions, coupling is annoying, and you soon feel the heat of programming hell. In this tutorial, we will discuss a… Continue reading How to Write Code That Embraces Change

Create A 3D Push Pin

Introduction Back when I wrote the popular A Scrap Of Notebook Paper tutorial quite a few of you wanted to know how I created the push pin shown in my final image. Well the wait’s over my friends! In this Photoshop tutorial I’ll show you how to create your own 3D push pin using Photoshop… Continue reading Create A 3D Push Pin

Design an Appealing Print-Ready Restaurant Menu in Illustrator

If you’ve ever seen a “food designer” fuss over every last detail of a delicious food item, you’d understand how exquisitely visual the food marketing process can be. The visual evaluation of food has been ingrained in the human psyche for thousands of years, and the right imagery can still elicit strong, visceral reactions (mostly… Continue reading Design an Appealing Print-Ready Restaurant Menu in Illustrator

40+ Useful HTML5 Tutorials And Techniques

For the web designers and web developers, this collection will be a treat for them because in this collection, we are showcasing 45 useful and amazing HTML5 tutorials and techniques that would astonish them. HTML5 is the latest and advanced version of HTML (HyperText Markup Language) and these days HTML5 is very popular among the… Continue reading 40+ Useful HTML5 Tutorials And Techniques

The Secrets of Photoshop’s Retouching Tools (Part 3)

In the third part of this mini series inside the Shortcuts series, Martin Perhiniak will explain how to combine the advantages of the Healing Brush and the Clone Stamp tool as well as how to make the most of selections while retouching. Let’s get started!

Quick Tip: Access the Hidden Photographic Toning Gradients in Photoshop CS6

The Photographic Toning Effects Photoshop CS6 comes loaded with 39 presets to simulate traditional darkroom toning and split-toning effects. Click on the image to download the high-res version you can print. Step 1 Open an image you want to split tone in Photoshop. For this tutorial, we’ll be using the image below as an example.… Continue reading Quick Tip: Access the Hidden Photographic Toning Gradients in Photoshop CS6

Create a Battlefield Scene Using Stock Photography in Photoshop

By combining the right photography in Photoshop you can create just about any scene that you want. In this tutorial, we will create a battlefield using several stock photographs. Let’s get started! Tutorial Assets Here are the stocks used to complete the image. Sky 1 Sky 2 Spikes Fire Fire 2 Smoke Soldier 1 Soldier… Continue reading Create a Battlefield Scene Using Stock Photography in Photoshop

How to Create Elegant Valentine’s Day Greeting Card with Abstract Hearts in Adobe Photoshop CS6

In the following Quick Tip tutorial you will learn how to use Custom shapes, Layer styles, and Gradients in Adobe Photoshop CS6 to create elegant Valentine’s Day greeting card with abstract hearts. You can use these techniques and elements to create your own greeting card! Layered PSD file included. Let’s get started! Final Image Preview… Continue reading How to Create Elegant Valentine’s Day Greeting Card with Abstract Hearts in Adobe Photoshop CS6

Loading Circle Animation Using Photoshop CS6

In today’s tutorial, we’re going to be creating a very simple ‘loading circle’ animation using Photoshop CS6, which you can use on your websites, or before your video projects. This effect is going to take advantage of some of Photoshop CS6′s improved animation capabilities, leaving you with a silky smooth result. Written In terms of… Continue reading Loading Circle Animation Using Photoshop CS6

Your First 30 Days of Learning Web Design: How to Get Started and Not Give Up

Congratulations! Web design can be one of the most useful skills to acquire in your professional career. Your first 30 days of learning are crucial because many people simply give up after a week or two. In this article, we’ll go through some useful tips and tricks to help you get started with web design… Continue reading Your First 30 Days of Learning Web Design: How to Get Started and Not Give Up

25 Best Photoshop CS6 Tutorials

Quickly Select Skin Tones Color Splash Effect in Photoshop CS6 Quickly Change the Appearance Content Aware Move Tool Introducing the New Crop Tool Hunger Games Poster Composite Using Photoshop CS6 Use New Features in Photoshop CS6 to Create an Administrator Dashboard Interface Use the Content Aware Move Tool Create Tilt Shift Photography with the New… Continue reading 25 Best Photoshop CS6 Tutorials

Ruby on Rails Study Guide: The History of Rails

Ruby on Rails – or simply, Rails – is an open source, rapid web development framework, with a continuous goal of maximizing developer happiness and productivity. Created nearly a decade ago, Rails today forms the backbone of many of the most popular applications on the web, and has an incredibly vibrant and passionate community. In… Continue reading Ruby on Rails Study Guide: The History of Rails

The Secrets of Photoshop’s Retouching Tools (Part 2)

In the second part of this mini series on Photoshop’s retouching tools, Martin Perhiniak will talk about the differences between Photoshop’s suite of retouching tools. Let’s get started!

How to Create a Vector Cross Stitch Effect in Adobe Illustrator

In today’s tutorial, I’m going to show you how to create a cross stitch effect using Adobe Illustrator CS6. I’ll be using the Appearance panel and patterns in order to create the design and then show you how you can create a simple Aida fabric background pattern. This is a great tutorial for those who… Continue reading How to Create a Vector Cross Stitch Effect in Adobe Illustrator

A RequireJS, Backbone, and Bower Starter Template

Switching to a modular approach to writing JavaScript is unfortunately a more difficult process than we might hope. Once you understand the concept of AMD, you then have to figure out the logistics: how do you setup RequireJS? What about non-AMD libraries? What about dependency management? What about configuration and optimization? Download the Video Using… Continue reading A RequireJS, Backbone, and Bower Starter Template

Why 2013 is the Year of PHP

2012 was an excellent year for the PHP community, thanks to many badly needed features being added to version 5.4, as well as the countless projects, advancing PHP to the next level. In this article, I’d like to review a handful of the issues that people had with PHP in the past, and provide a… Continue reading Why 2013 is the Year of PHP

Quick Tip: Create a 3D Bullet in Adobe Illustrator CS6

Better Workflow in PHP With Composer, Namespacing, and PHPUnit

In this video tutorial, we’ll again focus on workflow. Specifically, we’ll use Composer’s built-in autoloading capabilities, along with namespacing, to make for an elegant testing experience. We’ll also review a handful of PHPUnit best practices, as we get setup with these tools. Download – Source files Nettuts+