Designing the Web: Photoshop Tutorials for Designing a Website Page 2
Ready to continue on this journey of knowledge? Well here are the rest of the Photoshop tutorials we gathered for designing a website.
More Designing the Web
How to design a layout with Membership Area In Photoshop
With this tutorial from grafpedia you will be able to create a beautiful membership sign up area for your website that will allow users special member access. With a range of some of Photoshop’s basics like shapes, layers, fills and more this membership area comes to life with style.
Other important lessons learned in this tutorial:
- Using multiple layer styles
- Using the gradient editor
- Using the pen tool and gaussian blur for shading
How to Create an Effective Coming Soon Page
Here in this tutorial from PSDFAN Extra you learn how to design a simple, but effective coming soon page, all the while being schooled on some of the theories behind these site teasers. The tutorial uses a combination of techniques and tools like shapes, gradients, brushes and more to teach you how to craft this simple design.
Other important lessons learned in this tutorial:
- Creating layer masks
- Using a combination of layer styles
- Using opacity for creating subtle effects
In this simple tutorial from Adobe Tutorials you will learn how to craft a fashionable portfolio for any artist or freelancer in your client base. This is a fairly basic layout and site design overall, but is still quite stylish a finished product.
Important lessons learned in this tutorial:
- Using various layer styles
- Using the rectangle tool
- Using patterns
- Using the brush tool
- Using free transform tool
In the following tutorial from bwebi.com you will be shown how to build your very own basic real estate related website template with a layout that should be able to help your clients move a house or two.
Important lessons learned in this tutorial:
- Using various marquee tools
- Using the free transform tool
- Using the pen tool
- Using rounded rectangle tool
- Using the brush tool
- Using clone stamp tool
- Using the gradient tool
How To Create a Sleek Grid Based Website Design
This tutorial from Blog.SpoonGraphics will guide you through building a sleek website design for a fictional eyewear company, perfect for promoting any kind of product that your client may need to be prominently and stylishly displayed. The tutorial employs a range of PS techniques and tools.
Important lessons learned in this tutorial:
- Using patterns
- Using various layer styles
- Using layer masks for image concealment
- Using a grid for proper alignment and spacing
- Using rounded rectangle tool
How to Create a Custom App Site Layout
This tutorial from Instinct Design Tuts will help you learn to create a clean, professional, custom app site layout using the power and flexibility of Photoshop. Learning to use textures, blending options, typography and more to give this web design the form it needs to make a splash on the web.
Other important lessons learned in this tutorial:
- Using grids for spacing and alignment
- Using the rectangle tool
- Using the custom shape tool
- Using the rectangular marquee tool
- Using the ellipse tool
- Using the opacity and the pen tool for shading
How to create an advanced Game Portal Layout
In this tutorial from Ultimate Designer Toolkit you will learn how to create a sleek, highly advanced layout for a game portal. The tutorial teaches you to use Photoshop’s range of tools like various shapes and layer styles, brushes and more to complete this tech styled site.
Other important lessons learned in this tutorial:
- Using the pen tool
- Using patterns
- How to rasterize a layer
Create a Light Textured Web Design in Photoshop
Here in this tutorial from Design Instruct you will learn to create a lightly textured web page layout. By learning how to apply subtle textures in web layouts, how to create a seamless diagonal mosaic pattern and employ it in your design, and more you will be able to create a page layout that is but simple and effective.
Other important lessons learned in this tutorial:
- Using the 960 grid system to arrange elements
- Using grids for even spacing
- Using Photoshop filters
- Using the rectangular marquee tool
- Using various shapes
- Using the free transform tool
- Creating a clipping mask
- Using gradients
How to design a law/justice website in Photoshop
This tutorial from Trendy Tuts will take you through the steps to creating a website layout geared towards those clients working in the field of law using Photoshop. It will use a combination of basic shapes, various layer styles, and more with a handful of pre-made resources to make this layout come together.
Other important lessons learned in this tutorial:
- Using the pen tool
- Adding anchor points for expanding standard shapes
- Using filters to add texture
- Using the gradient tool
Create a Typography Based Blog Design in Photoshop
Here in this tutorial from Line25 where you will be shown how to craft a very minimal, typography based blog design which is built over a strict underlying grid (in prep for coding into a WP theme).
Important lessons learned in this tutorial:
- Using filters for subtle texture
- Using blending modes
- Using shapes for basic elements
- Using layer styles
That’s a Wrap
That does it all for this end of the post, but now we turn things over to you and the comment section for your added thoughts and favs. Feel free to drop us a link to a tutorial that you feel should have made the cut.
(rb)