1001+ Photoshop Website Layout Tutorials

1001+ Photoshop Website Layout Tutorials

1 | page 2 | 3 | 4 |

189 tutorials in database (4 pages)

Sorted by: Views | Date

New Search | All Categories

Links on page 5 | 10 | 25 | 50

51. Unique Navigation Header

by photoshopnerds (59 tutorials)

May-20-2006

Step by step details on how to create this stylish header.

52. Designing a Travelogue

by fierydarts (41 tutorials)

May-18-2006

Learn how to ceate this stylish travel style layout.

53. Stretchable professional web template with flash header

by omnetwork (28 tutorials)

May-17-2006

In this huge tutorial you will learn how to create stretchable template (stretchable in both axis: in width and height) in Adobe Photoshop, how to cut it in ImageReady, how to make header menu animation in Macromedia Flash and at the end How to define web site template in Dreamweaver (a .dwt file).

54. Extreme Template 07

by akpro (3 tutorials)

May-14-2006

Part 1: The Head - Covers the layout planning, header and the navigation bar.
Part 2: The Neck - Covers the making of the creation of the banner and the content box under the header.
Part 3: The Body - Covers the making of the edible content area and the side menus and bars.
Part 4: The Foot - Wraps it up by covering the finishing components of the template.

55. Magnificent Minimalist Layout

by ascendancy9 (6 tutorials)

May-6-2006

Websites can be found in all shapes and sizes, hence it is imperative that size (especially width) is considered when designing your website. Before development commences, choices must be made about what dimensions will best reflect your website content. In this tutorial I will examine the development of a minimalist template. One advantage of this kind of design is that no matter what the resolution, no side scrolling is necessary (even on 640 x 480 pixels).

56. Kids Store Navigation Header

by slowlysinking (24 tutorials)

May-2-2006

Learn how to create this web header with circular patterns in just a few quick steps.

57. Creating navigational header for a detective agency site

by marciastutorials (8 tutorials)

May-2-2006

Photoshop Tutorials created by Marcia. Updated often with new tutorials to teach you the latest tricks in Photoshop. Let me be your tutor for all your Photoshop tutorial needs.

58. Cartoon Style Navigation Header

by photoshopnerds (59 tutorials)

May-1-2006

Create this professional cartoon style website menu

59. Multicolor Header for a Florist Web Site

by invano (42 tutorials)

Apr-29-2006

Learn how to create this stylish multi-color header for your website layout.

60. Red Chrome Navigation and Template Panels

by velvetelvis (4 tutorials)

Apr-22-2006

Learn how to create this stylish small red chrome navigation and template panels. Warning: page contains only one graphic image. This may be very slow for small bandwidth user. A psd file is available for downloading.

61. Professional Navigation Menu

by 13dots (132 tutorials)

Apr-17-2006

Create a professional style glossy website menu

62. Clean Stylish Header

by aggropixel (7 tutorials)

Apr-15-2006

In this tutorial you will learn how to create a simple clean style header. There is nothing fancy here just a pollished design. Let's Begin! Here is what you should end up with, using your own logo.

63. Cool Navigation Header

by photoshopnerds (59 tutorials)

Apr-15-2006

Step by step illustration on how to create this stylish website header and menu.

64. Designing a Cool Top Navigation Header

by smartphotoshop (30 tutorials)

Apr-14-2006

Learn how to design this very stylish oval shape navigation header.

65. Professional Business Web Template

by ddgfx (4 tutorials)

Apr-7-2006

Step by Step Guide to Create a Pro WebSite!

66. Style Switcher

by ascendancy9 (6 tutorials)

Apr-2-2006

This tutorial explains the art and design that can be expressed in a style switcher for your website created in Adobe Photoshop. A style switcher (used to switch CSS styles) can be used to great effect on any layout in order to allow user customisation of your website.

67. Div Layout

by ethereal-design (1 tutorial)

Mar-27-2006

Learn how to create a simple layout and slice it into multiple DIVs. For this tutorial, you need Photoshop v7+ and Dreamweaver or other similar editor.

68. Extreme Template 06

by akpro (3 tutorials)

Mar-23-2006

Part 1: The Head - Covers the making of the header of the template.
Part 2: The Neck - Covers the making of the navigation bar and the banner.
Part 3: The Body - Covers how to design the body and structure of the template.
Part 4: The Foot - Wraps it up by covering the finishing components of the template, the footer.

69. Creating a Navigation Header

by fierydarts (41 tutorials)

Mar-14-2006

Create a professional website nav header with smooth rounded shapes and corners.

70. Creating a Navigational Header

by photoshopnerds (59 tutorials)

Mar-12-2006

Create a website header with stylish buttons.

71. Creating a Curtain Style Navigation Header

by fierydarts (41 tutorials)

Mar-7-2006

Learn this simple and creative technique to create a stylish navigation header with curtains.

72. Navigational Header

by tuts4you (8 tutorials)

Mar-1-2006

Create a professional style indented site menu header

73. Pixel Layout

by tutorialweb (12 tutorials)

Feb-23-2006

This fairly long tutorial shows how to create an amazing pixel layout including stylish header and menu bar area.

74. Making colorful web site template

by omnetwork (28 tutorials)

Feb-22-2006

A step by step tutorial about making colorful web template using Adobe Photoshop. To accomplish this tutorial you must have basic knowledge of Adobe Photoshop.

75. How to make a full template Part 3

by forum (47 tutorials)

Feb-21-2006

This is the third and final part of three tutorials on how to make a template. This one will focus on the coding. The first is on how to design the layout, and the second, how to slice it. You will need to know how to work with the tools, know how to create groups/layers. This template uses default tools (brushes, gradients, swatches, fonts).

76. How to make a full template Part 2

by forum (47 tutorials)

Feb-19-2006

This is the second of three tutorials on how to make a template. This one will focus on the slicing. The first is on how to design the layout, and the third, how to code it. You will need to know how to work with the tools, know how to create groups/layers. This template uses default tools (brushes, gradients, swatches, fonts).

77. How to make a full template Part 1

by forum (47 tutorials)

Feb-17-2006

This is the first of three tutorials on how to make a template. This one will focus on the design. The second will be on how to slice this template after done, and the third, how to code it. You will need to know how to work with the tools, know how to create groups/layers. This template uses the default tools (brushes, gradients, swatches, fonts).

78. Design HTML/PSD web template for Dreamweaver

by omnetwork (28 tutorials)

Feb-12-2006

The aim of this tutorial is to teach you how to make nice web template design using Photoshop CS, ImageReady, Dreamweaver and images. This tutorial is divided in sections:
1. Preparing required resources
2. Designing layout
3. Making HTML and DreamWeaver template file
4. Using template

79. Website Layout Part 1

by mickm (78 tutorials)

Feb-9-2006

This tutorial explains how to create a full website template and where to put everything and where you should pay attention to! You will learn the basic concepts and techniques required in web designs.

80. Creating a Web Site Template

by photoshopnerds (59 tutorials)

Feb-7-2006

There are different ways of designing webpage layouts for different organizations. In this tutorial we’re creating a web page template for a children’s learning centre. We’ll keep it simple and colorful so that it appeals to children and young parents.

81. Website Layout Part 2

by mickm (78 tutorials)

Feb-6-2006

Learn how to create a full website template including the slicing and coding chores. What you have to do when you slice a template with ImageReady!. And automatically convert your template into HTML!

82. Creating a Navigational Header for a Website

by photoshopnerds (59 tutorials)

Feb-4-2006

Learn how to creating a professional style navigational header for a website.

83. Full Site Design

by my-photoshop (12 tutorials)

Feb-2-2006

Step-by-step through the design, slicing, and html editing of a website. From scratch. This tutorial is a biggie, so I've broken it down into sections. Add this page to your bookmarks and you can easily come back at intervals to finish it without stressing.

84. Smooth Gradient Content Boxes

by photoshopdepot (2 tutorials)

Jan-31-2006

Create professional style gradient content boxes

85. Professional Navigation Bar

by skeletorscorpse (20 tutorials)

Jan-30-2006

This tutorial guides you through how to make a professional looking navigation bar for your site. This tutorials takes in to account that you have a reasonable knowledge of Photoshop. The design includes gradient effects and stylish faded indents.

86. Creating an Expandable and Stretchable Content Box

by webdesign (128 tutorials)

Jan-29-2006

Learn how to create a table with rounded corners border and then place your contents in a box that stretches.

87. Creating navigational header for website

by pickadesign (1 tutorial)

Jan-28-2006

Learn how to create this navigational header for website in just a few simple quick steps.

88. WebTemplate

by xtro32 (1 tutorial)

Jan-19-2006

Learn how to make your own web page template.

89. Gel Tab Navigation Design

by my-photoshop (12 tutorials)

Jan-16-2006

A tab navigation system makes it extremely easy to get around a website. This tutorial is extremely easy, ending with a very clean tabbed navigation bar that you can add to any existing or yet-to-be website layout. The only thing which you have to have is the Mac OSX layer style, which you can download from this tutorial site.

90. Black Menu

by webmaster-project (5 tutorials)

Jan-3-2006

Learn how to create a stylish black menu box.

91. Make A Site Tutorial

by sigrealm (2 tutorials)

Jan-3-2006

This beginner tutorial illustrates how to make a basic website layout from scratch. It includes an Imageready section to teach you on how to do a rollover.

92. Simple Context Box

by toxiclab (16 tutorials)

Dec-30-2005

Learn how to create a contentbox for your web site.

93. Website Business Layout

by conceptvisionz (12 tutorials)

Dec-27-2005

Learn how to create a website with this tutorial that looks both clean and professional.

94. Trendy Header

by pbkill (2 tutorials)

Dec-27-2005

Learn how to create this trendy and contemporary for your web site.

95. Coded Box

by pbkill (2 tutorials)

Dec-20-2005

First we are going to start off by making the box. Keep in mind this tutorial will not give you every color used. We want you to add your own artistic touch to this content box. PSD file is included.

96. Dark Clean Header

by tutorial-factory (4 tutorials)

Dec-18-2005

Learn how to create this dark, clean header using some marquees and shapes.

97. Rock Cafe Website

by designtutorials (78 tutorials)

Dec-16-2005

If you have to make a website for a friend or for a customer you try to keep it clean and simple. This tutorial will teach you to make a clean website for a rock caffe. Many people think that this is somehow hard, because it`s about rock. You just have to find pictures related with the theme and pick an appropriate design.

98. Slice your layout and export images Part 3

by entheosweb (32 tutorials)

Dec-5-2005

Learn how to slice your website layout and save images for the web using Photoshop. This tutorial is part of a 4 page tutorial on how to create a simple web site using Photoshop.
Tutorial 1 : Creating a unique website header
Tutorial 2 : Designing your website layout in Photoshop
Tutorial 3 : Slicing your layout in Photoshop
Tutorial 4 : Creating your web site in Dreamweaver

99. Small Business Template

by adroitdezigns (8 tutorials)

Dec-3-2005