40 Useful Photoshop Web Layout Tutorials

Adobe Photoshop is the industry-standard when it comes to creating web page layouts. Photoshop’s versatility, robust set of tools, and excellent workflow management make it the web designer’s preferred application when creating designs for the web.
In this collection, you’ll find 40 high-quality tutorials on creating web layouts from scratch using Photoshop. This article contains a copious variety of tutorials to help you learn and master the various techniques involved in creating beautiful web layouts.

1. Corporate WordPress Style Layout

Create a dark, clean, and usable blog style layout.

2. Old Paper Layout

Learn how to create an elaborate and decorative design with paper textures.

3. Making the ‘Clean Grunge’ Blog Design

In this tutorial, you’ll see how to make a clean/grungy layout.

4. Create a Sleek, High-End Web Design

This tutorial goes over how to create a dark-themed, classy web design.

5. Clean Website Layout

Learn how to create a simple and modern web layout using Photoshop.

6. How to Create a Grunge Web Design in Photoshop

In this tutorial, you’ll read a detailed discussion on creating a grungy web design.

7. Photoshop Paper Texture Grunge Design

You will learn how to create a paper texture and then how to use it in a web design layout.

8. How a Simple Layout Can Be Mixed ‘n’ Matched

You’ll be creating a simple web layout that can easily be changed.

9. Five Looks, One Layout

Learn the process of creating a versatile web layout that can embody a variety of design themes.

10. Design a Cartoon Grunge Web site Layout

Mix the illustrated look and the popular grunge design trend in this web layout tutorial.

11. Professional Magazine Web Layout

Create a clean and functional "magazine-style" web layout in Photoshop.

12. Web Design – Journal

Learn how to create an aged journal web layout.

13. Modern Web 2.0 Web Layout

Create a modern, clean, and usable web layout by following along this tutorial.

14. White Notebook Style Web Template

Learn how to design an elegant and fancy notebook style web layout.

15. Design a Unique Grungy Website Layout

In this Photoshop tutorial, you’ll learn how to create a grungy-themed web layout.

16. Simple Night Style Website Layout

In this tutorial, you’ll learn how to create a night-themed web layout.

17. Professional Design Studio Web Template

This tutorial goes through a process of designing a professional web layout.

18. Design a Clean Business Layout

Create a clean, web 2.0 style web layout in this Photoshop tutorial.

19. Create a Dark Themed Web Design

This Photoshop tutorial goes over the methods involved in designing a dark-themed web layout.

20. Portfolio Design Part 1 and Portfolio Design Part 2

Create a stylish porfolio by following along this two-part Photoshop tutorial series.

21. Portfolio Gallery Layout

Learn a process for creating a sleek online photo album.

22. Business Layout #3

This tutorial will show you how to design a clean business web layout.

23. Dark Style Web Template

In this Photoshop tutorial, you’ll be creating a beautiful dark-themed web layout.

24. Create a Vibrant Modern Blog Design in Photoshop

Learn the techniques involved in creating a high-impact blog layout in Photoshop.

25. Full Web Template

In this step-by-step tutorial, you’ll learn how to create a beautiful web layout.

26. Car Layout

This tutorial goes over the creation of a web layout for car enthusiasts.

27. Full Photoshop Website Design

Learn how to create a web layout that’s perfect for graphic and web designers.

28. Environmentally Friendly Layout

Create a clean and green web layout by following along this Photoshop tutorial.

29. Architecture layout

Create this architecture-themed, brown-colored web layout by following along this Photoshop tutorial.

30. Design Layout

Learn the process of creating this sleek and dark-themed web layout in Photoshop.

31. Creative Studio Web Page

In this tutorial, you’ll learn how to create a dark-themed portfolio site.

32. Website Design Studio

Create a bright and high-impact web layout by following along this Photoshop tutorial.

33. Carbon Fiber Layout

Learn how to use carbon fiber textures in your web designs in this Photoshop tutorial.

34. Creating Business Style Template Design

Learn how to make a dark-themed, clean web layout in this tutorial.

35. Model portfolio layout

In this Photoshop tutorial, you’ll learn how to make a beautiful portfolio web layout that has a textured background.

36. Clean Business Layout Tutorial

This tutorial will show you the techniques involved in creating an eye-catching business themed layout.

37. Premium WordPress Photoshop Layout

Learn how to create a "premium" WordPress web layout from scratch by reading through this Photoshop tutorial.

38. Portfolio Layout #9

This Photoshop tutorial goes over the techniques involved in creating a clean, blue-themed portfolio site.

39. Design Studio Layout

This tutorial shows you how to create a website layout that has metallic gradients.

40. Nature Portfolio Layout

Create a nature-inspired web layout by following along this Photoshop tutorial.

Got a tutorial to share?

If your favorite tutorial isn’t listed above, why don’t you tell us a little bit about it and drop us a link in the comments.

Read more »

Posted in: Graphic Design,Web Design

25 GIMP Video Tutorials to Help Get You Started

The GIMP is a very powerful, open source digital image editing application that rivals its commercial counterpart – Adobe Photoshop. Open source alternatives are great not only because they’re free, but because of the helpful community that typically surrounds them.
One of the quickest ways to pick up something new is by watching video tutorials. With that concept in mind, I’ve collected 25 awesome GIMP video tutorials geared to get you started, get you familiarized, and get you inspired. If you’re intrigued to try out GIMP after watching some of these videos, you can grab GIMP from their download page.

Basics

1. Gimp Basics

A showcase of some fundamental functions in GIMP.

2. The User Interface

A basic introduction to the interface to help you get started in exploring GIMP.

Photo Enhancement and Manipulation

3. Authentic Vintage Effect

A simple but beautiful photo effect based on a photoshop tutorial from Veerle’s blog.

4. Selective Decolorization

Change parts of of an image into grayscale, a technique known as "selective decolorization".

5. Cracked Face Effect

Apply a cracking effect to your favorite photos.

6.Using Curves to Improve Contrast

Utilize the Curves tool to enhance the color contrast of digital images.

7. Streching shadows by using curves

Extend shadows in a photograph using the Curve tool.

8. Create a Graduated Neutral Density Filter to Enhance Photos

Improve photos using the ND filter in GIMP.

9. Create a Sketch Effect

This tutorial shows you a speedy way to create a sketch effect on digital photos.

10. Skin Airbrushing

An excellent introduction to Selective Gaussian blur and the Quick Mask tool.

 

11. Improve Night Shots Using Curves

Use the Curves tool to digitally enhance night shots.

12. Turn a digital photo into Polaroid

Create a Polaroid border effect on images.

13. Full Flare Control with The Gimp

Shows you how to create and control flares using the FlareFx effect.

14. Transform a Photo into Pop Art

An interesting photo tutorial on converting existing photos to mimic pop art.

15. Create a 3D Pop-out Effect

Make subjects seem like they’re popping out of a polaroid picture using this tutorial.

16. Eraser to Transparent Background Removal

A basic demonstration on how to remove the background of an image.

17. Semi-Advanced Photo Manipulation

This tutorial shows a few intermediate to advanced GIMP techniques.

18. Quick Masking

How to use the Quick Mask tool to selectively colorize a flower.

19. How To Change Hair Color

Showcases the Path tool.

20. Recolor Hair and Eyes

This is another demonstration on how to change hair color as well as eye color.

 

Lettering and Graphics Creation

21. Transparent Glass Lettering

A glossy/glassy lettering effect adapted from an awesome photoshop tutorial by the Collis Ta’eed of PSDTUTS.

22. Create a 3D Web Browser

A tutorial on replicating this popular effect using GIMP.

23. Realistic Water Droplets

Shows you how to make an almost photo-realistic water droplet.

24. Fire Effects

Create flames from scratch.

25. Vector Land

* This video is no longer available. In this tutorial, you’ll see how to create the vector look-and-feel in GIMP.

Here’s some additional GIMP resources:

• GIMPshop – GIMPshop is a modification of GIMP that mimics how Photoshop looks and functions.
• GIMPTalk.com – GIMPTalk.com is a community website of all things GIMP related.
• Gimpology – Gimpology is a tutorial site dedicated to GIMP.
• "Grokking the GIMP" – a downloadable book on GIMP.
• GIMP – Tutorials – the tutorials section on GIMP’s website.

I hope you enjoyed this collection of video tutorials, and I hope I’ve encouraged some to at least try out and experiment with GIMP.

Read more »

Posted in: Other