Search Our Web Design Blog...

Tuesday, November 22, 2011

Photoshop web layout

We have used PS previously to make banners and buttons, now we are going to use PS to create an entire page, all the way down the the HTML/CSS that defines out buttons etc.

You will be using the tools in PhotoShop (most often the blending options) to create a complete layout.  Please choose from the following 40, find one you like, you can adapt colors/images:


1. Corporate WordPress Style Layout

Corporate WordPress Style Layout - screen shot.

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

2. Old Paper Layout

Old Paper Layout - screen shot.
Learn how to create an elaborate and decorative design with paper textures.

3. Making the ‘Clean Grunge’ Blog Design

Making the ‘Clean Grunge’ Blog Design - screen shot.
In this tutorial, you’ll see how to make a clean/grungy layout.

4. Create a Sleek, High-End Web Design

Create a Sleek, High-End Web Design - screen shot./
This tutorial goes over how to create a dark-themed, classy web design.

5. Clean Website Layout

Clean Website Layout - screen shot.
Learn how to create a simple and modern web layout using Photoshop.

6. How to Create a Grunge Web Design in Photoshop

How to Create a Grunge Web Design in Photoshop - screen shot.
In this tutorial, you’ll read a detailed discussion on creating a grungy web design.

7. Photoshop Paper Texture Grunge Design

Photoshop Paper Texture Grunge Design - screen shot.
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

How a Simple Layout Can Be Mixed 'n' Matched - screen shot.
You’ll be creating a simple web layout that can easily be changed.

9. Five Looks, One Layout

Five Looks, One Layout - screen shot.
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

Design a Cartoon Grunge Web site Layout - screen shot.
Mix the illustrated look and the popular grunge design trend in this web layout tutorial.

11. Professional Magazine Web Layout

Professional Magazine Web Layout - screen shot.
Create a clean and functional "magazine-style" web layout in Photoshop.

12. Web Design – Journal

Web Design - Journal - screen shot.
Learn how to create an aged journal web layout.

13. Modern Web 2.0 Web Layout

Modern Web 2.0 Web Layout - screen shot.
Create a modern, clean, and usable web layout by following along this tutorial.

14. White Notebook Style Web Template

White Notebook Style Web Template - screen shot.
Learn how to design an elegant and fancy notebook style web layout.

15. Design a Unique Grungy Website Layout

Design a Unique Grungy Website Layout - screen shot.
In this Photoshop tutorial, you’ll learn how to create a grungy-themed web layout.

16. Simple Night Style Website Layout

Create a Dark Themed Web Design - screen shot.
In this tutorial, you’ll learn how to create a night-themed web layout.

17. Professional Design Studio Web Template

Professional Design Studio Web Template - screen shot.
This tutorial goes through a process of designing a professional web layout.

18. Design a Clean Business Layout

Design a Clean Business Layout - screen shot.
Create a clean, web 2.0 style web layout in this Photoshop tutorial.

19. Create a Dark Themed Web Design

Simple Night Style Website Layout - screen shot.
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

Portfolio Design Part 1 and Portfolio Design Part 2 - screen shot.
Create a stylish porfolio by following along this two-part Photoshop tutorial series.

21. Portfolio Gallery Layout

Portfolio Gallery Layout - screen shot.
Learn a process for creating a sleek online photo album.

22. Business Layout #3

Business Layout #3 - screen shot.
This tutorial will show you how to design a clean business web layout.

23. Dark Style Web Template

Dark Style Web Template - screen shot.
In this Photoshop tutorial, you’ll be creating a beautiful dark-themed web layout.

24. Create a Vibrant Modern Blog Design in Photoshop

Create a Vibrant Modern Blog Design in Photoshop - screen shot.
Learn the techniques involved in creating a high-impact blog layout in Photoshop.

25. Full Web Template

Full Web Template - screen shot.
In this step-by-step tutorial, you’ll learn how to create a beautiful web layout.

26. Car Layout

Car Layout - screen shot.
This tutorial goes over the creation of a web layout for car enthusiasts.

27. Full Photoshop Website Design

Full Photoshop Website Design - screen shot.
Learn how to create a web layout that’s perfect for graphic and web designers.

28. Environmentally Friendly Layout

Environmentally Friendly Layout - screen shot.
Create a clean and green web layout by following along this Photoshop tutorial.

29. Architecture layout

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

30. Design Layout

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

31. Creative Studio Web Page

Creative Studio Web Page - screen shot.
In this tutorial, you’ll learn how to create a dark-themed portfolio site.

32. Website Design Studio

Website Design Studio - screen shot.
Create a bright and high-impact web layout by following along this Photoshop tutorial.

33. Carbon Fiber Layout

Website Design Studio - screen shot.
Learn how to use carbon fiber textures in your web designs in this Photoshop tutorial.

34. Creating Business Style Template Design

Creating Business Style Template Design - screen shot.
Learn how to make a dark-themed, clean web layout in this tutorial.

35. Model portfolio layout

Model portfolio layout - screen shot.
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

Clean Business Layout Tutorial - screen shot.
This tutorial will show you the techniques involved in creating an eye-catching business themed layout.

37. Premium WordPress Photoshop Layout

Premium WordPress Photoshop Layout - screen shot.
Learn how to create a "premium" WordPress web layout from scratch by reading through this Photoshop tutorial.

38. Portfolio Layout #9

Portfolio Layout #9 - screen shot.
This Photoshop tutorial goes over the techniques involved in creating a clean, blue-themed portfolio site.

39. Design Studio Layout

Design Studio Layout - screen shot.
This tutorial shows you how to create a website layout that has metallic gradients.

40. Nature Portfolio Layout

Nature Portfolio Layout - screen shot.
Create a nature-inspired web layout by following along this Photoshop tutorial.


1 comment: