Photoshop Web Graphics Tutorials Intermediate : Photoshop Web Tutorials Guide : Photoshop Web Graphics Tutorials
Graphic Design Resources Directory: Directory of Graphics Software Tutorials and All Your Graphics and Graphic Design Needs


Creative Public - Creative Graphic Design Business Resources - Graphic Design Business Resources

 All Graphic Design Resources Directory now includes Original Graphic Design Articles, Links to Hand-Picked Graphics Software Resources, Desktop Publishing (DTP) Tools, & Links to Tutorials for Image Editing Graphics Software like Adobe Photoshop or QuarXpress. And visit our most popular pages - Printing Layout Templates, Graphics Software Information, Online Design Classes, Design Schools, Graphic Design Jobs, Design & Layout Articles. If you get lost, visit our Site Map.

AddThis Social Bookmark Button

Search Design Schools

Zip Code:



Online Campus Both

home > Web Design Tutorials > Web Graphics Software > Adobe Photoshop Tutorials > Adobe Photoshop Intermediate Tutorials

PHOTOSHOP WEB TUTORIALS INTERMEDIATE - Lessons for Learning How to Use Adobe Photoshop with these Online Intermediate Tutorials.

Clean Web Page - Learn how to create a Clean Web Page.

Website Header - Begin with a new file, 700x150, and with a transparent background. Then take the Paint Bucket Tool and fill the layer with any color. Now right click on layer 1, choose Blending Options and apply these settings.

Stylish Webpage - In this tutorial you will learn how to create a Stylish Webpage. I will use a few patterns in this tutorial, so let's begin with the first pattern.

Futuristic Interfaces - Using some advanced layer style techniques, a custom texture, and trendy shapes, create beautiful futuristic interfaces.

Professional Web Layout
Create a professional and clean looking webpage layout with this very detailed, step by step tutorial.

Creating a WebHosting Layout
This layout was created for education purposes ONLY. There will be no resell or any type of reuse of the layout without WebDevTutorial's consent. But that does not mean you may not learn the skills we are teaching you today from this tutorial to create your own webhosting layout to sell or use.

Blog Template And Design Tips - Tips for designing a blog using Photoshop.

MP3 Player Interface - Learn how to make a content box in photoshop.

Dark Layout Part 1 - Learn how to make a web site header and nav in this first part of the "Dark Layout Tutorial". Learn various techniques to create a cool custom header, including making gradients and various other effects.

Dark Layout Part 2
You will learn how to create 2 content boxes, one for the main content and the other for affiliate space.

Dark Layout Part 3
Slice your layout and then learn how to code it with the help of Dreamweaver! Learn how to slice your layout, code it in Dreamweaver and add things such as I-frames and much more!

How to Make a Classy Looking Navbar
This free Photoshop tutorial is designed to show you an easy way to create an elegant sleek looking Navigational Bar for your site in just a few minutes. This lesson is very easy to grasp and will show you some simple techniques that you can use across your site design. With this navbar you can use a variety of backgrounds for different effects using the text placeholders from this tutorial so it's a good template for later use down the road.

Web Buttons - Learn how to make some creative web buttons for your sites layout.

Stylish Borders
Create some stylish web borders in just a few steps.

Tiled Plasma - Create a nice looking plama effect.

Polygon Art - Learn how to use the polygon shape tool to produce a great pattern effect for your art work.


Glossy Text - Create some nice vibrant glossy text.

Content Box - Create a rather stylish content box.

Hosting Layout
Create an advanced professional layout for your hosting company, 100% expandable with a 100 steps to follow.

Overlay Rotations
Create a unique photo effect which literally takes 5 secs.

Smooth Metal
- Create some smooth gradient metal which looks effective on many things.

Modern Buttons - Create some nice crisp modern navigation buttons for your site layout.

Dashed Borders - Learn how to create dashed borders for your images and graphics in this simple and easy unique tutorial.

Futuristic Buttons - Create a stylish futuristic button, they match the colour scheme of the content box tutorial too!

Futuristic Content Box - Create a very cool high tech content box in photoshop and then learn how to slice and export it into dreamweaver and add an iframe.

Navigation Bar - Learn how to create a navigation bar for your web site. You will learn how to gradient a layer, make diagonal spaces inbetween links and so on!

Pixel Shadow
Create a pixel shadow in less than 1 minute in this simple tutorial! This will work best on pixel font's and is great to make pixel text stand out too.

Liquid Chrome - Learn how to create a very cool effect using only a few filters. This is a great effect to make and always looks good!

Pixel Stretch - Learn how to create a rather cool looking "pixel stretch" effect on your images. This is a handy trick, I use it all the time for various things and it takes very little time to do!

Colour Burst
Learn how to make a colour burst effect in a few simple steps. This can be used for forum sig's, web site headers.. the list is endless.

Dot Pattern - Apply a dot pattern effect yo your images in this simple tutorial. Learn how to define a pattern and apply it to a layer on your images or graphics.

Business Header and Navigation - Make a new document. I used 600x120 for this tutorial. Leave the background white for the time being.

Smooth Navigation - Make a new document. I used 400x100. Start out with creating a New Layer and selecting the Rectangular Marque Tool. Make a selection like below:Fill it in with any color:Right click the layer and select Blending Options...

Floppy Disk - Learn how to create a real-looking floppy-disk.

A True Vector - This tutorial will teach you how to make vectors like those nice and populair cell-shades!

Xtreme Layout - This tutorial will teach you how to create a website layout. If you find it too hard, you can download the template.

Communication Hologram - You've practically recreated the communications clone hologram just looking at this tutorial - it's so easy.

Anime-Text - This is really random, but iy gives nice results =) It doesn't really matter what font you use for this one. Place some black text on a desired place. Add these layer-styles to it…

Pimp my Ride - First create a new layer with the text PIMP MY RIDE using the font Banana Split. Add these layer-styles to it. CTRL+Rightclick the Thumbnail in the layer-palette to select the text…

Web Page - A notch above the beginner level, this tutorial assumes that you have some knowledge of web page elements and are willing to choreograph your own navigation.

Improving and Enhancing Signatures - We'll be working on blending, brushing, color, and rendering techniques for creating signatures in this tutorial.

The Vector Look - Gentleman, start your engines. A rapid tour of this tutorial will teach you how to recreate the car of your choice in vector graphics.

Menu Button
Begin with a new file, 110x20, and with #8FB9EE as your background color. Then create a new layer, and then set your foreground color to #AF137D. Now take the Rectangular Marquee Tool and draw out a small rectangle and fill it with your foreground color...

Digital Painting Steps
Let Chris Arlidge of Steel walk you through the creation of one of his digital paintings, in this case a painting of a bee.

Painting Clouds in Adobe Photoshop
Have a Wacom pen tablet set and don't know what to do with it? Try creating clouds with Chris Arlidge.

Simulate Water Bubbles - Combine a Gradient Fill with Smudged Layer Masks to create the following water image…

Painting Clouds
Here is a simple cloud painting method. Begin with a document preset size of your choice. I used 500x500. Set Foreground color to a blue. I used #498ccb, and Background of White: #ffffff…

Petro Art Style - A few simple vector layers to make compelling retro art... Next create a new Solid Color Fill to represent the background sky…

Creating Surface Water - Using the 'Creating Surface Water' tutorial image, I'll show you how to add bubbles effect, as captured below...

Script Events Manager Tips
- You can remove a custom notifier (such as the SAVEFORWEB listed above) event from the drop-down list by deleting the Script Events Manager.xml preference file from in the Photoshop preferences folder…

Script Events Manager Tips
- You can remove a custom notifier (such as the SAVEFORWEB listed above) event from the drop-down list by deleting the Script Events Manager.xml preference file from in the Photoshop preferences folder…


Multiple Animations on Remote Rollovers - Read this tutorial to know how to utilize multiple animations within a single document through the use of Remote Rollovers.

Trendy Backgrounds
Here is a simply and effective trendy background combination process you can use for banners or as an addition to your graphics.

Use Adobe Dialog
A neat feature into Photoshop CS2 is this ' Use Adobe Dialog' as opposed to using the standard 'Use OS Dialog' when Opening files.

Text Wrapping in Photoshop
- Here is a great way to simulate text wrapping to your Paragraph type with full formatting just like a Page Layout editing program.

Introduction to Scripts and Actions Events Manager in Photoshop CS2 - A great new automation and productivity tool shipped with Photoshop CS2 is the new Scripts and Actions Events Manager.

Club Style Business Card Tutorial
Make a new document. Choose red as the foreground color, press Ok and then Fill the background layer by Alt/Opt Backspace or Edit: Fill. Drag in a stock flower image, Edit: Transform: Scale it down to a manageable size…

Professional Portrait Design Tutorial
Create a new document choose a color from the color or swatch palette to fill the background layer. Choose Pattern Fill from the adjustment/fill layer icon on the bottom of the layers palette. There you will see several Adobe preset pattern fills…

Blend IF into Textures - With an expert guide at your side, learn an effective way to blend items, such as text, into textured surfaces.

Blur Effect
Let's take an image and quickly create a professional looking 'ad' right from a photograph. It always helps to have access to quality stock photography as it will make your role a lot more enjoyable and easier to do. You can also get this design itself from the iPSD Directory...

Simple Layout With Photoshop - Hello to all of you wanting to make good websites... Photoshop is a powerfull tool that can help you a lot in your web design... By the end of the tutorial we will know how to make a basic II or III column layouts with photoshop…

Blend Mode Graphic Design - Start by creating a selection of a person that you are going to use. Here I started to select the background with the magic wand tool and then went into quick mask mode to further define the selection…

Blending Images
This is a tutorial on blending images into your signatures. For this tutorial, you need to have a background for your signature and a render, which you want to blend. My graphics are shown below…

Blending Text - This tutorial shows an but effective way of blending text to fit in with any background. It also demonstrates some blending options used for text effects.

Object Interlacing
Welcome to the interlaced objects tutorial. Here we will learn how to make objects have a ceirtain depth at ceirtain points of the image. If you don't get the concep very well, just keep on reading and you will see the nice effect this is :)

Reflections Made Easy! : Mirror Effects - It is sometimes tempting to go head-first into making a reflection, often with a simple mirror approach. However this often proves to be the most un-appealing version of a relection when used improperly…

Digital Liquid Pipes
- Gather round ye plumbers and sons of plumbers. Today we'll create high-tech multilevel pipes with liquid running inside.

Movie Poster Design Tutorial
- Start off with a new document. You're going to find out that making a movie style design is much easier than you thought. You just need the proper training. It would also help to interact with this original ' movie poster' .psd design which you can get from the iPSDirectory or by signing up for ...

Create a travel Ad - Create a new document and drag in the layers that you would like to use. You can break this apart, recreate, interact with, etc. when you have the original .psd from the iPSDirectory…

Movie Logo Typography Tutorial
Here is a variant re-creation of a popular movie poster...any guess which one? Create a new document (File: New) with these dimensions…

Clipping Mask/Water Product Ad
For this ad design technique, start off with your preselected thematic source image. Go ahead and duplicate the layer by dragging it to the new layer icon on the bottom of the layers palette. Now select the background layer in the layers palette and choose white as your foreground color...

Club Poster Design Tutorial - Here I'm starting with a layer that was already enlarged to show color elements that should make a nice backdrop. Next I imported (dragging) another photo from my collection (the club chandelier) which is available in the 2,000 Images CD with the Photoshop Designer Package. Next I did a pix....

New Document Action Preset - If your anything a hobbyists with Photoshop as I am, you may find yourself experimenting with a new technique or mixing filters. I usually start with a prefab document size. Here is a great way to help simplify this new document preset with minimum clicks...

Ticker Flash Animation - Looking for a simple way to create small flash ticker animation? You need only follow this link.

Photoshop Custom Shapes (Loading) - Here is how to load ready to use downloaded Custom Shape .csh files within Photoshop and ImageReady…

Photoshop Patterns (Loading) - Here is how to load ready to use downloaded Pattern .pat files within Photoshop…

Photoshop & ImageReady Backgrounds
- Here is a simple way to create small tillable background images for your web pages using Photoshop and ImageReady. This tutorial assumes you are using Adobe Creative Suite and the fonts bundled with it…

Animated Water Reflection - Double Whammy Tutorial
Programs that can be used to create this effect: Gimp, Paintshop Pro 9, PhotoShop and all other programs that support Adobe Photoshop plug-ins(you can create this effect in either program, instructions are only given for PSP & PS)…

Smooth Vector ImageReady Flash Animations - Here is a great way to create compact animations exported as Flash files via ImageReady CS. (3 pages)

Smooth Vector ImageReady Flash Animations - As noted in the previous lesson, the premise of creating these animations as compact as possible relies solely on Vector shapes within Photoshop or ImageReady.

Teen Magazine Cover Tutorial
To start this tutorial off you'll want to use some high resolution photos such as of a celebrity, etc. that will be your cover story focus. Teen magazines will often have stories of celebs or scandals, etc. with the main focus being this image…

Dr Julian's Texturing Tutorial
In this tutorial course (6 pages) Dr Julian will teach you how to texture a human head model.

Flyer Booklet Cover - Learn how to make a club flyer booklet cover.

Edge FX
- Start off with a nice image that you would like to add some edge effects / border to. Now go to Image: Canvas Size and enter an amount in both width and height to create an expanded border effect around the image (by adding a larger document size with white background)...

Replace Color Adjustment
This tutorial will give you a good introduction to the color replacement tool. It's always best to start out with a simpler image as far as clear distinct color 'separation' to make the selection easier that you would like to change color on…

Create & Publish Your Own HTML Ezine - This tutorial course (9 pages) will guide you through all the steps on how to create & publish your own HTML Ezine.

DVD Package Header
- Start out with a new document with these approximate settings. What we're doing here is creating a DVD header logo.

Open Type Features in Photoshop CS - A new feature to the designers world (though some features were introduced as earlier as Photoshop 6) is the OpenType font standard jointly developed by Adobe & Microsoft. This tutorial will just be an introduction to some of the great features and benefits to using OpenType fonts.

ImageReady CS Optimization Droplets
Here is a great way to automate Optimizing a folder of images uses an ImageReady Droplet. (Requires a pre-set of images in a distinct folder)

Photoshop Threshold Art Collage - Here is a few simple steps to create eye catching artwork using the threshold menu command (combining prefab shapes).

Minesweeper Metaball - Combine some prefab shapes and some layer styles helped create this minesweeper meta ball effect.

Photoshop Displacement Map Example - Here is a neat way to blend elements, particularly textual, into fold textures seemlessly.

Polaroid Picture Effect
Yet another PSD.NET tutorial filled with actions, thrills, suspense but no mystery. It's easier than you think to produce quality design. The most important thing is to master the technical Photoshop skills (basic and beyond) and to keep adding to your repertoire of creative applique...

Movie Gold Text
What we're going to do here is create a similar version to a very well-known movie logo and marketing campaign…

Filter Designing
Start out with a fairly large size document. In this tutorial we're just going to fool around with a few different things and see what we end up with. I want to show you some 'edge' techniques…

Flyer Booklet Index
For this flyer magazine tutorial, you can start with these same settings if you want. Note that I am using 300 dpi because this design will be meant for print. With RGB (roy g. biv) you want print from your own printer. CMYK mode is used through the printing industry as the standard...

Gritty Cinema Text
In this tutorial we are going to create a popular text effect that you may have seen on many movie posters and in advertising. If you thought there would never be a use for threshold (the worst thing you could do to an image); well we've found it's purpose!...

Liquid Digital Lava
Start off with a new document that gives you plenty of room to work with. Because we're working originally from within Photoshop you can choose whatever resolution and image size you want without having to worry about losing image quality when importing bitmap images...

Movie Text More - This tutorial is so simple yet effective you'll have to be kicking yourself later. It comes from my experience yet also inspiration from other sources (duh) but having the ability to recreate a similar effect…

Fantasy Portrait
Start by creating a new document. This one is 521 X 837 @ 150 dpi (because of the source document I copied from). You are automatically on the background layer. Now go to the gradient tool 'G'. Double click on the gradient window to bring up the gradient editor...

DVD Back Package - This tutorial will cover a lot of different elements in producing and laying out a design. This style of design can be used for the back of DVD's or VHS and was inspired from one…

Romantic Wedding Montage - Dearly beloved, we are gathered here today to join one photo and one fantasy in holy matrimony. What a groovy montage.

Smooth Vector ImageReady Flash Animations
The key to adding multiple links without slices to a flash animation is to use Image Maps.

Futuristic Tech Background - Ladies and gents... this right herre is the tutorial to end and begin all tutorials. If you look at the end result there would probably be no way on earth that you would believe that this is the first design I've ever done in this genre…

Futuristic Tech Background - Let's add a little more of a deep space effect by grabbing the elliptical (circle) marquee tool…

Smoke Effect - This tutorial was requested from a PhotoshopDesign.NET viewer 'Lex' of Playbook Muzik. Here is a short tutorial on how to create a smoke effect. Create a new blank layer above your base layer in the layers palette…

Western Style Poster - Grab your eraser and go in with the zoom tool to make history by superimposing yourself onto a photo of something splendid like the grand canyon.

Movie Gold Text
Create a new document with these settings to start making this movie gold text. Once again we're at 300 dpi in case we want to use this logo for print. We can always Save As a jpeg at 72 dpi…

Club Promo Page - In this tutorial I'll show you how to make a promo page for a night club.

Smart Sharpen Filter
Learn how to use the new Smart Sharpen filter in Adobe Photoshop CS2 to sharpen an image and find out why it’s better than the Unsharp Mask filter.

Linking Smart Objects with Layer Mask
Photoshop CS2 does not allow Smart Objects to be linked with a layer mask but that doesn't mean it's impossible. Learn this quick and easy trick to link Smart Objects with a layer mask.

Colorful Poster - In this tutorial we are going to recreate a version of a very popular themed movie which you should all recognize. Start off with this image size in a new document (note that 72 resolution = output for web). If you wanted to output for print you would have to have 300 dpi...

Take On Me Effect
Start off with a nice handsome wedding portrait. Duplicate the original layer so we have something to mess around with (hehe). Go to Image: Adjustments: Replace Color. I want to show you this feature…

Honeymoon Blending Modes Poster
For this design we want to have a nice sunset background. I'm using one of my hundreds from my portfolio. You can also get this design from the iPSDirectory with my Photoshop Designer Package. For now I'll retain the image size (at 72 dpi) but I don't want to work on the original...

Blending Mode Magic - Start with a new document. You can use these settings if you'd like for this advanced blending mode magic Photoshop design tutorial…

Sharpening Edges - Learn how to apply an Unsharp Mask filter to edges only.

Combining Multiple Exposures
Combine images taken at different exposure to reveal detail.

Porcelain Effect - Create soft skin tones and rich black hair. This effect also enhances many other types of colour photos such as landscapes.

High Tech 3D Tiles
Learn how to make metalic tiles arranged in a randomly generated pattern.

Neon Road - Create a futuristic road scene using a wide variety of filters.

Twirling Light - Add a radiant light effect to your photos.

Circuit Board - Add a modern circuit board effect over an image. This effect works best with low detail images such as portraits.

Fred Miranda's Stair Interpolation - Stair Interpolate an image to create a sharper enlargements.

Pastel Infrared
For a more neutral effect, use the Lab color mode to combine an infrared photograph with a colour photograph. This tutorial requires an infrared and colour photograph taken at the same position.


Colour Infrared - Create colour photographs with the detail and effect of an infrared photo. This tutorial requires an infrared and colour photograph taken at the same position.

Realistic Rainbow - You've heard of purple prose. Well, here's a way to sweeten the photographs you take to make them suitable accompaniment for the stories you write.

Converting images into 3D - Turn any photograph into 3D images you can view with anaglyph glasses.

Intensify Focus with Targeting Effect - Intensify focus with this targeting effect.

Ray of Light
- Add stunning rays of light to clouds.

Image Stacking - Combine a sequence of images into one image.

Grungy Photo Montage - Using layered masks with subtle blends, you can combine a series of snapshots into one finished photo for a dramatic effect.

Scan Lines
Create those popular scanlines and apply to your images and graphics. You will learn how to define and create your own pattern in Photoshop and apply it to various layers on your canvas.

AddThis Social Bookmark Button



We are looking for submissions of Graphic Design Tutorials and Articles from Knowledgeable Graphic Designers and Publishing Professionals. We will add a paragraph about your graphic design services (or other services as long as it is not offensive) along with your published article. We will add your contact information, including your graphic design business' website link, within this paragraph. gets around 16,000 Unique Visitors every day and this could mean a nice amount of traffic being sent to your graphics business' web site (or your graphic design portfolio). Find Out More Here



Please click here to visit our sponsor

Graphic Design Menu


OUR FRIENDS -- Adobe Photoshop Tutorials -- Photoshop, Flash, 3D Studio Max Tutorials -- Web Designers & Developers --Photoshop Tutorial Man -- Tutorial Guide -- Free Webmaster Tutorials -- Web Designers -- Web Design Portfolio --AllFreelanceWork--AllFreelance--Artists Helping Children --All Creative Portfolios -- All Work at Home Ideas

All Graphic Design Resources Center is always looking for more information & resources to put into our graphics directory portal. If you have any design or dtp resources that you think would fit in well, such as graphics software links, graphics and clipart foundries, objects, filters, fonts, desktop publishing or other graphic design resources articles, templates, etc...Please email us and let us know. All Graphic Design Resources Center has been around since 1998 (originally as deezin dot com), offering desktop publishing information and graphic design resources to make your web search for graphics stuff easier. Let us know how we can make All Graphic Design site more helpful for you! All informational links are hand added by an editor. Thank you for visiting our site and don't forget to bookmark this site.

R E L A T E D . L I N K S

About Us | FAQs | Contact Us | Terms of Use | Privacy Policy

All website design, text, graphics, selection and arrangement thereof, and software are the copyrighted works of Allfreelance, © 2003 - 2019 QuinStreet, Inc.