1001+ Photoshop Web Images & Graphics Tutorials

1001+ Photoshop Web Images & Graphics Tutorials

1 | page 2 | 3 | 4 |

168 tutorials in database (4 pages)

Sorted by: Views | Date

New Search | All Categories

Links on page 5 | 10 | 25 | 50

51. Mobile Ringtone Animated Ad Banner

by slowlysinking (24 tutorials)

Jun-3-2006

Create a banner for mobile ringtone site

52. Custom Blog Headers

by associatedcontent (53 tutorials)

Jun-2-2006

As blogs continue to grow in popularity, the demand to make one design stand out from the next grows as well. Using Photoshop, you can create a unique header for your blog that will make it stand out from the crowd. It only takes about 8 steps, and the best part of all is that blogs are one place where you can express your own personal style like nowhere else.

53. Creating an Innovative Logo

by fierydarts (41 tutorials)

Jun-1-2006

Create an innovative logo using basic shapes and simple rotation.

54. Simple Logo

by toxiclab (16 tutorials)

Jun-1-2006

This tutorial shows how to create a simple logo which can fit in every web page header.

55. Saving an image for your website

by skeletorscorpse (20 tutorials)

May-29-2006

This tutorial with guide you through how to make save a photo so that its small enough to fit on your website.

56. Trimming Graphics to the Smallest Possible Size

by tutorialstreet (22 tutorials)

May-27-2006

Web graphics always need to be made as small as possible in terms of file size. A few factors that contribute to making smaller files include: reducing the color palette, using flat color whenever possible, avoiding horizontal gradients, and finally, trimming your graphics to their smallest possible size. In this case, the image to be cut out has highly feathered edges. These types of graphics are difficult to cut out by eye-balling it alone. Often times, you will end up cropping too closely and you will see a hard edge once the image is on the Web. This tutorial offers a few quick tips and tricks to trim the graphics.

57. Professional Gradients

by domeadesign (2 tutorials)

May-26-2006

This tutorial shows two simple methods to make great looking gradients. This technique can help make your web design templates more professional.

58. Slicing Layouts

by megatuts (8 tutorials)

May-24-2006

You will be learning how to use the slice tool to cut images up into smaller pieces for faster loading and to add content such as text and images inside of it. Every web template, or layout, is always sliced before it goes onto the web so you can add the text that you select on it and images. You can either do this in Adobe Imageready, or Photoshop. I'll be explaining how to do it with Adobe Photoshop.

59. Aqua Header

by twisted-humor-etc (1 tutorial)

May-22-2006

This tutorial shows how to create a glassy style aqua header.

60. Animated Banner for Purse Store

by smartphotoshop (30 tutorials)

May-9-2006

Learn some simple ad banner animation tricks

61. Animated Banner with Bull's Eye Effect

by photoshopnerds (59 tutorials)

May-6-2006

Animated ad banner creation

62. Custom Smiley

by 2dvalley (6 tutorials)

May-6-2006

This tutorial describes how you can create your own custom smiley.

63. Web Site Navigation Header

by slowlysinking (24 tutorials)

May-4-2006

Learn how to create this navigation header for your website or template.

64. Designing a Corporate Header

by invano (42 tutorials)

Apr-25-2006

Learn how to design a webpage header with graphic images suitable for corporate or business website.

65. Professional Banner

by cagedflame (10 tutorials)

Apr-18-2006

This tutorial shows the steps to create a professional banner for your website.

66. Plastic Navigation Bar

by tutorialpark (25 tutorials)

Apr-11-2006

This tutorial illustrates the steps to create a plastic navigation bar for your website.

67. Watermarking Images

by marktiarra (10 tutorials)

Apr-2-2006

It's not that difficult to stick your website name down on the bottom of an image or your logo. But when you want to make something really nice... a little transparent, not blocky and 2D and that shows up against a light or dark background, there are a couple nice tricks. The way we do this tip you end up with a watermark saves as a separate file that you can use to batch process images or even stick on your videos.

68. Raise Me

by tutorialhome (5 tutorials)

Mar-31-2006

Learn how to create the raised effect which is used by many web designers today.

69. Cuts Away

by marktiarra (10 tutorials)

Mar-25-2006

If you are a web designer this is going to be the one thing you use Photoshop for more and more. Cutting big, complex images into slices that are all optimized and separated properly so you can mix images with text and make parts of the image hot links. All those functions are handled by Photoshop for you quite nicely.

70. Personal Blog Header

by skeletorscorpse (20 tutorials)

Mar-15-2006

This tutorial illustrates how to make a banner for your personal blog. It takes into account that you know the basics of Photoshop.

71. Ornate Website Header

by tutorialblog (14 tutorials)

Mar-14-2006

This tutorial will show you how to create a decorative header that you can use on websites or blogs.

72. Thumbs-O-Rama

by marktiarra (10 tutorials)

Mar-12-2006

This tip is really a conglomeration of several tips that you can use in numerous ways. The most basic part of it is a very simple, single filter that will clear up images that you have shrunk down to a smaller size. You'll also be learning to batch process a directory full of images, create and use actions, and optimize images for much quicker download.

73. Automatic Multiple Image Resize

by conceptvisionz (12 tutorials)

Mar-6-2006

This tutorial uses adobe photoshop to automatically batch resize your images. This is very helpful if you have 10, 30, 50, 100+ images that you would like all to be a certain size. Very tedious and pointless to do it one by one. The web gallery function will be our means to accomplishing this task. not only will it resize our images automatically for us, it will also create thumbnails, and a html document displaying everything in case that is also what you need.

74. Fresh Little Menu

by n1studios (8 tutorials)

Feb-28-2006

This tutorial shows how to make a fresh and simple menu for your website.

75. Slicing Tips

by 13dots (132 tutorials)

Feb-20-2006

This tutorial will not teach you how to slice your layout/template. It is basically about some tips that are usefull when slicing your layouts.

76. Professional Header with Navigation Bar

by skeletorscorpse (20 tutorials)

Jan-30-2006

This tutorial illustrates how to make a header for your website with a horizontal navigation bar. It takes in to account that you know the basics of Photoshop.

77. Banner Spot shape

by cagedflame (10 tutorials)

Jan-15-2006

Learn how to create a small banner ad.

78. Corner Banner

by visualdesigncore (13 tutorials)

Jan-12-2006

Create a trendy corner banner that can be used as an advertisement on a website.

79. Interactive Memory Map

by madinpursuit (3 tutorials)

Dec-20-2005

This tutorial explains how to produce a memory map you can customize and post on your own site. Level: Intermediate - assumes you know your way around Photoshop CS2 and enjoy a nodding familiarity with ImageReady CS2.

80. Optimizing to File Size

by s13 (23 tutorials)

Dec-5-2005

Learn how to optimize an iamge to a certain file size.

81. Rollover Button

by goody-gfx (2 tutorials)

Nov-21-2005

We are going to make a button with a rollover effect in Photoshop and Imageready (both CS2).

82. Remote Rollovers

by biorust (119 tutorials)

Nov-6-2005

When creating web interfaces it is often all too easy to forget the sheer power and features that Adobe Photoshop's sister application, Imageready, has to offer. The aim of this article is to provide an insight into remote rollovers, a feature which automatically combines images, Javascripting, and HTML code to create interfaces that respond according to pre-defined user actions. All you need to get started are a suitable interface design, Adobe Illustrator CS or greater, and a little time.
Note: There are many different types of rollovers - replacement rollovers which replace the original image with a new image, addition rollovers which add visual elements to the existing image, and remote rollovers, which trigger different images in different locations on a Web page. This article concentrates solely on the last rollover type.

83. Designing a simple website banner with a logo

by entheosweb (32 tutorials)

Oct-31-2005

Simple step-by-step tutorial on how to create a web site banner and logo in Photoshop. The sample .psd and completed website is also included.
A banner or a header is a graphic that is found at the top of a web site which usually displays the company name and the logo. It is often the first thing a person sees when they open the website. The blending of colors should be attractive, informative, comfortable for the eye and help to convince the viewer to stay on your site.

84. Green Leaf Content Box

by designtutorials (78 tutorials)

Oct-31-2005

Learn how to make a professional content box in just a few minutes.

85. Favicon Tutorial

by s14 (9 tutorials)

Oct-24-2005

Learn how to make a basic favicon button

86. Official Stamp

by alexallied (1 tutorial)

Oct-20-2005

Learn how to make an Official Stamp in Photoshop and Position it on your website using CSS.

87. Indented Avatar

by coldsteelstudios (12 tutorials)

Sep-24-2005

In-depth tutorial on how to make this indented avatar.

88. Create your own Favicon

by tutorialstream (11 tutorials)

Aug-31-2005

A favicon is that little image you can see in your url section just before the site address. Don't be anonymous! Give your site a full personality. Most browsers save your favicon when your visitors bookmark your site and this is a good wey to catch your visitors'attention, when they do to browse their bookmarks your site will be different from the mass!

89. Clean Business Header

by depiction (67 tutorials)

Aug-31-2005

Lear how to create clean and elegant business header suitable for any professional site.

90. Stylish Borders

by zymic (25 tutorials)

Aug-30-2005

Learn how to create some stylish borders in just a few quick and easy steps.

91. Creating A Favicon

by pimpmycom (32 tutorials)

Aug-9-2005

In this tutorial I will teach you how to create a favicon for your site. A favicon is a little icon that appears in the address bar of your internet browser on the left-hand side. Our site has one, if you're unsure what they are, just look at the top of your browser right now, and look the the left of the text in the address bar. See it? That's a favicon.

92. Hidden Message

by premonitionstudios (4 tutorials)

Aug-1-2005

Hide secret messages in your images using this tutorial.

93. Web Host Banner

by zymic (25 tutorials)

Jul-21-2005

Create a professional banner for your company.

94. Retro Navigation Box

by mickm (78 tutorials)

Jul-17-2005

Learn how to create this style of modern retro navigation box.

95. Creating and Using Favicons

by biorust (119 tutorials)

Jul-4-2005

A favicon is a little icon that appears next to a website's URL in the address bar of a browser and/or bookmarks area. Not all sites have them, of course, but go to any large commercial entity (i.e. eBay, Adobe, etc), and they will be clearly on show (depending, of course, on your browser's age and support for the feature). Whilst by no means an essential part of any website, favicons are a great way to make your site stand out from the crowd, and work well in maintaining a design theme. Here's how you make them...

96. Slicing a Template

by adroitdezigns (8 tutorials)

Jun-2-2005

This tutorial shows you how to slice a template using Adobe ImageReady.

97. Affiliate Button

by metic (5 tutorials)

May-2-2005

Basic video tutorial on creating a stylish 88x31 affiliate button!

98. Photoshop and ImageReady Backgrounds

by heathrowe (143 tutorials)

Apr-27-2005

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. For those not using the Creative Suite, substitute D below with an ornate dingbat font from your collection and ignore 'Ornaments' step that immediately follows.

99. Inset Lines

by tutorialwiz (99 tutorials)

Apr-21-2005