I love finding new free PSDs to share with all of you. I’m also trying to reign in my own skills, so that maybe I can produce some nifty icons or buttons of my very own to share. To do this I’ve had to dive deep into Photoshop, and try to figure out what the heck I’m doing.
For web design, Photoshop is a key tool when working on new projects. The program has become an industry standard since the program is powerful and very useful, making it possible to create layers, manipulate colors and sizing, add textures, etc. This said, Photoshop is also very tricky to master. There are many features within the program itself, and it can be hard to decipher when to use which tool, or how to create the effect you need.
Instead of spending time trying to use every feature in Photoshop, you can turn to step-by-step tutorials. You can efficiently learn processes specific to you desired end result and pick up some neat tips, tricks, and effects on the way. This saves you tons of time by narrowing your focus to the project at hand.
Below I’ve complied a list of awesome tutorials relevant to creating PSD web elements that can expand your skill set and improve the range and quality of your work. Just click on the images below to go to the tutorials. I hope you enjoy!
1. Photoshop Basix
This is a great place to start – especially if you’re clueless and a complete newbie. There are 29 individual tutorials to get you started including your first rendezvous, blending, clipping masks, smart objects, and more.
2. Create a Modern Business Template
This is a simple template tutorial that includes creating a layout with a header, slide show, services, video, about us, testimonials, and footer. The tutorial aims to also teach you a bit about 3D effects for the interface, how to create patterns, and more.
3. Create a One-Page Retro Web Design Layout
This tutorial uses the 960 grid system to create a lovely web design with a retro feel. Contract, alignment, repetition, and proximity are the four design principles that are the focus of this tutorial.
4. Create a Sexy Small Download Icon
Simple techniques are taught and applied in this tutorial to create an awesome download icon. But everything you learn about shadows, gradients, glows, overlays, and strokes can be applied to other web elements.
5. Create a Professional Web Layout
This tutorial will help you create a clean and professional layout. Many Photoshop techniques are shared in this detailed step by step instructional tutorial for web design.
6. Create a Gaming Layout
Learn how to develop a gaming layout with Photoshop. Apply overlays, blending, shadows, gradients and more to create a cool futuristic effect.
7. Create Tasty Social Icons
Using the Shape Tools options panel, this tutorial shows you how to use stroke to create cute stitching and detailed adjustments.
8. Designing a Clean Photography Web Layout
This tutorial shows you how to make a photography portfolio web design layout. Some of the techniques covered are using transparency, icon design and development, and using grids.
9. Create a Dark Portfolio Web Design
Use textures and patterns as you follow along with this tutorial to create a dark portfolio design. Light colors are used to highlight important features, and gradients are kept to a minimum.
10. Create a Semi-Realistic MacBook from Scratch
This tutorial shows you haw to create your own MacBook Pro from scratch using grids, vector shapes, warp techniques, layers, masks, and noise. The end result is a great PSD you can use in other designs.
Your Tutorials & Results
Let me know if you’ve found any other awesome PSD web element tutorials that have really helped you! And if you happen to make any cool PSDs as a result of a tutorial and want to give them away for free – drop me a note on my contact page so I can check out your work!