Category: Tutorials

20 Free Retro Photoshop Tutorials

20 Free Retro Photoshop Tutorials
All PostsPhotoshopTutorials

Instagram has brought retro effects back and made vintage look cool again. Photoshop is an amazing tool letting you go back in time and recreate the nostalgic looking design artworks.

Today I have collected 20 beautiful Photoshop tutorials showing you the techniques and tricks creating retro graphics and vintage effects. Starting with beautiful typography tutorials and finishing with appealing photo effects you will definitely learn new Photoshop skills and have much fun.

Read More

10 Useful Sass Mixins for Modern Developer

10 Useful Sass Mixins for Modern Developer
All PostsTutorials

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. I’ve been using Sass for quite sometime and found out that mixins are something any front-end developer would enjoy and take advantage of saving time and being more efficient.

A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible.
It save quite a lot of time and helps developers ensuring that the code is not redundant and organized nicely.

I recommend using Compass as they have many built in mixins that simplify developers work.

Read More

28 Photoshop Tutorials for Learning New Web Design Techniques

28 Photoshop Tutorials for Learning New Web Design Techniques
All PostsPhotoshopTutorialsWeb Design

Some designers advocate skipping the Photoshop process and moving from wireframes directly into HTML/CSS. This is possible for smaller projects but not always advisable. Adobe Photoshop offers the best tools for testing color schemes, gradients, icons, and detailed page elements before moving the layout into your browser.

If you’re a little rusty in Photoshop then these tutorials should get you back into the groove. I’ve collected 28 web design tutorials centered around Photoshop techniques for designing typical page elements. Most are simple enough that you can follow along without much prior experience in the software. But even the more advanced tutorials can offer insights and help newcomers understand the digital design process.

Read More

28 Tutorials about SVG Images in Web Design

28 Tutorials about SVG Images in Web Design
All PostsTutorials

Scalable images have become a lot more popular in recent years. As modern browsers slowly accept the notion of SVG images we can see many techniques being released out on the web. These range from scalable responsive logos to animated line drawings – all through the use of dynamically-generated images.

This collection of tutorials should be more than enough to get you all caught up to speed with the latest trends. Even if you know absolutely nothing about SVG images or how they’re created, these articles should provide insight along with a few industry tips & tricks. SVG resources appear to be a growing solution amongst web designers. Take a look over this showcase to understand what all the fuss is about.

Read More

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

All PostsFront End DevelopmentTutorials

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 to demonstrate how we can build this effect to be used in any website. To save time I’ll be using the jQuery Tags Input Plugin which is free and open source to use on any project. I prefer this plugin over some others because of the many parameters and options for customizing the experience. Take a peek at my live demo to see what we will be creating.

Read More