Photoshop Advanced Web Graphics Tutorials : Photoshop Web Tutorials Guide : Photoshop Advanced 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 Web Graphics Tutorials

PHOTOSHOP ADVANCED WEB TUTORIALS - Learning Expert-Level Adobe Photoshop Techiques for Great Effects.

100% Layout Tutorial - Create an effective layout, then learn how to manually code it in Dreamweaver without the use of slicing! 100% Expandable.

3d Metallic Text Tutorial - 1. Create a new image. Size depends on the size you want on your text. Make some text. Make it big, and use a cool font! Now your image should looks SOMETHING like the image on the right. 2. First change the color of your text to a nice color! In my case, I changed it to (#00A4FF)...

A Car is Born - This is more of a guide rather than a tutorial, i will not explain step by step how to do things. You are expected to know how to airbrush and be pretty good with photoshop before doing this tutorial. Don't expect to finish this tutorial in 10 minutes and have good results...

Abstract Lightning Tutorial - Start off with your abstract image. Mine is a portion of an old cinema 4d render. Create a new layer and call it "1". With your airbrush (5px wide) create smooth lines like the one's I made on my example below. Make them random, but also make it look good, that's what matters!...

Advanced Blending Techniques - With some of my work, questions often arise as to how I blend the images so seemlessly. A good question indeed. For the purpose of this tutorial, I will use the same technique I used to create an image in my digital creations gall

Airbrushing The Robodaemon Dude - STEP 1: I scanned in a pencil sketch and didn't really bother to clean it up since I will only be using it as reference and it will be coloured over as we go along. STEP 2: Ok I selected the shoulder pad area on a NEW layer above the pencil drawing using the polygon lasso tool...

A Little Digital Aerosol Art - STEP 1: I got a plain sheet of A4 paper and drew a few straight lines to Sit my lettering on, then roughly drew the outlines of my lettering. I then went over that with a permanent marker and added a bit of drop shadow to the left and lower edges of the lettering...

Animated Satin - This effect is kinda new, but is sure is really good. Again, use Image-ready to animate this satin!

Atlantis - By using the Ocean Ripple filter, and the Bevel option, this tutorial creates a website whose buttons are islands that sink beneath the waves.

Cat Woman - Turn someone into half human, half animal! 1. These are the 2 images i will be using for this tutorial. Obviously a cat, and a beautiful picture from RetroDiva on Deviant Art

- This tutorial is made for Photoshop 7 for advanced users but it also can be done in 6. There might be some small changes in steps though. This is also a visual guide and not a real tutorial. The reason for this is simple. It would take too long to do. You can also see the final result in my gallery ...

CD Player - Indeed working with Photoshop’s Pen Tool can be difficult; however, using this tutorial you will easily create your very own CD player with exactly this tool.

Cell-Shading - A populair technique that is really hard to create but eventually pays off! Also called Vectorising...


Colorize (video tutorial) - This more advanced method can make astounding results. You should try "Colorize - Quick Method" if you get stuck in this. Enjoy this video tutorial.

Color a Drawing - Color a home-made drawing with the pen-tool. This is an excellent tutorial for the people who scanned their pencil-drawings...

Creating an Aurora in Photoshop - This tutorial goes through the steps to creating a beautiful skyline above a grassy field. (This tutorial requires Photoshop CS, 7.0 or 6.0.

Creating a Web Page Header in Photoshop - The most important graphical element of any website is its header image. It's the image that will be seen more than any other on your web site, so it's important to get it looking good. )

Creating a 5-minute Website - If you find that you are totally unable to design a nice-looking website, no matter what you do, you'll find this five-minute website tutorial to be invaluable. I learned by imitating the websites of the professionals, and came up with this nice website design formula.

Custom Ride
How to turn your car, into a customised coloured ride! (All images in this tutorial are scaled down to around 50% and CAN ALL be enlarged). 1. Open your car in photoshop. 2. Now, grab the pen tool - make sure you have the "shape layers" button clicked as shown...

Dark side of the heart - 1.The idea was to show to a face / heart so that something surreal in this day of the Love and the Friendship was seen. First it was to find a photo that allowed me to make the heart with the face... the majority we have that completion in the face

Designing Portfolio Section (Exclusive Tutorial) - Don't worry about the content. Let's assume that you have already got something to show and we're now going to arrange all this fast and correctly. For myself, I chose the sexiest image of a portfolio - the shape of a notebook. You are free to create and contrive for your own pleasure though:

Digital Comics Coloring - Welcome, here I'm going to show you (using this simple image) the way I color comics using Adobe Photoshop™. Tutorials about coloring are so diverse and differents, cause everyone have his own style...

Digital Scrapbooking Intro tutorial - Adding visual elements like paper clips and freshly drawn cut flowers, we’ll learn how to make an artsy looking scrapbook for our digital images.

Digital Scrapbooking with Multiple Photos Tutorial - Here I'm going to put together a scrapbook page on the fly so you can learn several different techniques that you can use specifically with Photoshop to get it done. First, find a few images from your File Browser that you want to use. Crop them down to size with the crop tool...

Displacement - It's easy to make a coloured block of text, or a simple diagram (e.g. a flag), but to make it look like it's actually real, you'll need to follow these steps:

Doing Your Own Company Logo Design
Having your company logo design done by a professional can be an expensive process. Hopefully this tutorial will give you some ideas on creating your company logo yourself.

Duotone vs. Multichannel - Let's explore the multichannel color mode, a mode designed for storage of masks and for specialized printing. When you convert an image to Multichannel mode, you no longer have a composite channel with which to work. You manipulate each color channel individually. (You can, however, select mult....

Explosion Tutorial - 1. Start off with a new image of your size with a black backgound. Create a new layer (we're only going to use one layer in this tutorial so don't care to call it something). Create dots with the airbrush, use a 100px brush. 2. Now do some work with the smudge tool. Drag the smudge tool from.....

Fire Text (video tutorial) - Flaming text. Use it for barbeque events! Pretty many steps to walk through, but hopefully you'll learn something in this video tutorial.

Freeze Somebody in Carbonite - "Freeze!" Actually freeze your victims into carbonite without using the carbonite-feezingchamber on Bespin. Just do it with Photoshop...

Glitter Swirls - Using a dotty brush, a rainbow gradient, and lots of distortion, this tutorial goes through the steps to creating a swirly, glittery website layout.

Granite Tablet - Create this stone-like granite tablet that looks realistic. Very suitable for websites and forum-buttons!

Advanced Photoshop Web Tutorial - Graphical Watermarks - I've started here, with a blank white page (I always use width 780, height 600). The basic elements I've put in so far are the navy blue bar at the top, and some shadowed, stroked text.

Hi Tech Interface
This tutorial will show you step by step how to create a nice looking hi-tech interface. You can use it for your website or softwares.

How to make Web Buttons in Adobe Photoshop - In a new layer, select a circular area with the selection tool. (Holding down Shift will make the selection stay circular, rather than being elliptical.)

How to create a realistic Wood Texture in Adobe Photoshop - To create the wood texture in this tutorial, you'll need to be using Adobe Photoshop 6.0 or 7. The required "Noise Gradient" option doesn't exist in Adobe Photoshop 5.0.

How to Separate an Image from its Background - I've seen people try to separate an image from its background by using the Pencil tool, by playing with the Magic Wand, and even by trying to draw an outline with the Lasso tool.

Join the DarkSide - Whoever played Kotor2 knows what this tutorial is about. Turn your lovely family-members or friends into infamous sith like Darth Maul.

Logo Design
1. Open a new document of 350x350 pixels. 2. Make sure you set the foreground color to black and the background color with white. Fill the first layer with white. 3. Grab the pentool and make a shape whatever you like...


Making a Wedding Invitation in Photoshop - This tutorial shows how to create a scorched parchment texture, for a website or wedding invitation.

Modern Web Design Style
For this tutorial, I'm taking a temporary departure from realistic lighting, smooth bevelling, metallic effects, and soft shadows... :)

Making a Duotone Web Page Menu - This brief tutorial goes through the steps of making a simple, two-colour menu for a website in Photoshop.

Making a Nebula by using Difference Clouds - I have found very few uses for the "Difference" layer option. This is an exception. I've used this technique to make some nice wallpapers, which are available at the bottom of the page.

Make an Icon for Contacts (Exclusive Tutorial) - Oldman’s tutorial, remarkable for its clarity and simplicity, guides you through the process of creating a basic icon for contacts. Any experienced user can do it.

Make a Planet - This tutorial should step you through making a simple, yet realistic-looking planet using Adobe Photoshop 7, and ONLY Adobe Photoshop 7.

Make Watch - This tutorial is made for Photoshop 7 for advanced users but it also can be done in 6. There might be some small changes in steps though. You can see the final result at the end of the tutorial...

MP Comic (video tutorial) - Ever played Max Payne? This video tutorial teaches you how to do something similar to the digital artwork that pops up between the chapters.

Motion (video tutorial) - This video tutorial shows you how to add some motion and extras into your pictures. See the pathtool in action and learn some benefits of the layer mask.

Making a seamless web page background - Ever wondered how to make a tiled web page background where one tile joins perfectly with the next? This tutorial shows how to make a tiled web page background which has no visible tiling lines.

Making Interfaces / Skins - Welcome again to my tutorials. In this simple one I'm going to show you all the way I've do the applications interfaces or "skins" using Photoshop. Remember, you can change the methods and values that I use here, working in your own style...

Making Borders
- Some people asked me about how I do the borders from my artwork. Well, here let's see a way to create some very interesting borders, with some "pixeltool" style...

Nintendo DS - Learn how to make the Double-Screened Mayham, wich can be used for touch-games and other VERY funny games that will guaranteed to make you laugh...

Painting A Spaceship Hull Texture - This tutorial explains how to create a spaceship hull using some simple techniques, basically selections and the dodge and burn tool, after the base is layed in you can spend as long as you like adding details and defining things...

Painting A Blade Scene - Using this professional level tutorial, we'll bring our own version of the Marvel Comics character BLADE to life, without Wesley Snipes.

Painting Hair Tutorial
- Baldy, want some hair? Then read on as this tutorial widens your experience with brushes, highlights, and transparency levels to create a lovely wig.

Raindrops (video tutorial) - This video tutorial will give you the visual education that is needed to make these very realistic raindrops.

Random Lighting in Adobe Photoshop - This tutorial goes through the steps of making a very funky piece of wallpaper. The main focus of this tutorial is on the random lighting aspect, based on Adobe Photoshop's "Clouds" tool, but I'll also go into creating what I call a layer of "Canopy Lighting", by using a Noise Gradient. (Noise Gradient is only present in Photoshop 6.0 and later versions.)

Roll Over Buttons - This tutorial demonstrates how to use Nudge and Inner Shadow to give a button that pressed-down look while the mouse cursor is over it.

Shining Text Animation - Make your text shine like polished metal in many different colors, using Image-Ready!

Shining Parts - Make this diecast armor suit shine like on those sunny days using Image-Ready. This is an exelent way also for cars to make parts shine...

Simple Web Design - Many of the visitors to this site, and many of the people I've dealt with, are small businesspeople, who can't afford to have custom website design done by a professional web design firm.

Six Font Styles that Make Text Stand Out - It's easy to put text on a monotone background and have it stand out. However, when the background is multi-coloured, it becomes much harder to find a font style that will be easily readable.

Skinning Basics 1 - Metal N Stuff - This series of tutorials is going to be about various simple techniques used in Skinning models, focussing on details and textures used to create metallic skins. One of the techniques is to use photo reference and overlay it over the base colour, paint in your details over that...

"Splat" Website Layout - By using a few gradients, and applying the Wave filter, it's possible to make this simple website layout.

Sunlight Web Design Tutorial
- By using some Clouds, Noise, a few adjustment layers, and some ornaments, this tutorial demonstrates how to create a website with a very nice, sparkling, sepia effect. Tutorial requires Photoshop 6.0, 7.0 or above.

The Piglet Factory Website Tutorial - Follow the steps I took in Adobe Photoshop to create the fictitious "Piglet Factory" website.

The Making of Winter Mist II
A whole lot of Photoshop juju goes into the making of the tree. Made a mistake that could cost you hours of painstaking work? Cover that mistake with moss.

Realistic Microphone in Photoshop - Create a new Document 600 x600 -rgb, transparent bg Make a circle with the marquee tool Fill with a grid pattern. How to make Grids We want to make our grid nice and spher...

Sony Playstation Portable - Learn how to create the one handheld that can play DVD's and can be used to play various games at a really high detail... Gotta love it!

The Patch Tool: Method of Elimination - 1. Load an image in Photoshop. I will Eliminate the lady on your left using the 'Patch Tool'. 2. Select the Patch Tool from the toolbar, and begin drawing around the area you wish to eliminate. In this case i started off small, since i only have a small area to the far left of it to mimic.....

Texture Wrapping - In this tutorial I'll show you how to wrap a texture around a real object, such as a person. The same effect can be applied to beveled text, 3d models, and other objects with depth that cannot be effectively wrapped by simply covering them with a texture image...

"The Slime Factory" Web Design Tutorial - The owners of the Slime Factory wanted a website theme that would match their company name, so they enlisted me to design it for them

Tiger Skin Web Design Tutorial - This tutorial demonstrates how to make a website with a realistic tiger skin texture.

A Touch of Class Web Design Tutorial
If you'd like to design a site that's a bit more elegant than the standard business web design style, follow along with this tutorial.

Transparent Reflecting Sphere - Use this tutorial to create shiny spheres for your interfaces or to enhance your logos and whatnot. Right now it's working in Photoshop 5x, but not guaranteed for Photoshop 6. This tutorial is quite long, and complex; however, every detail is described...

Using Photoshop to make Metallic Buttons and Menus - This tutorial uses Gloss Contour, a feature only present in Adobe Photoshop 6.0 and 7.0.

Wave - step1: allright lets start out by making a new document. in this example i use 200x200. now lets reset your colors. simply press D step2: now lets start the project. go to filter > render > clouds. (if you would like you can repeat this step until you get some...

Comic Style Colouring - Shazam! This professional level tutorial will guide you through the process of creating your very own comic style image with many layers.


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.