This days, the tutorial indexing sites are the mother of all the traffic for blogs and small websites like mine, but also a good place to find the quality tutorials that you need.
Photoshop is one of the most “tutorialised” programs on the world in my opinion. More than 500 tutorials are created daily but don’t take my word for it. Just subscribe to all the RSS Feeds of all the tutorial indexing sites you came across and bookmark some of the mini-web/blog that create the stuff and you will see for yourself.
In this article I will talk about 8 Tutorial Indexing Sites that I use to visit almost everyday. This is not a top, it’s a share of some sites that I find useful.

• Good-Tutorials

This site is grate. The moderators are active, and you find fresh content daily and not all the submissions are accepted on the front page so you will find only quality content there. This is a good place to be when you just finished learning the basics or when you want to find some inspiration.

Tutorial Categories:

• CSS
• Flash
• HTML
• Illustrator
• JavaScript
• Photoshop
• PHP
• Ruby
• Ruby on Rails
• 3ds Max

Fresh Content: Daily.

• Pixel2Life

Another huge site. It has a funny layout, it’s harder to navigate compared to good-tutorials (It has adds added between tutorials…) but the content is updated daily. They also have a forum, so if you’re a poster, then you might want to try them ;)

Tutorial Categories:

• Adobe Photoshop
• Adobe Flash
• 3D Studio Max
• PHP Coding

Fresh Content: Daily.

• Tutorialized

Another huge site that really helped me in my beginning time was Tutorialized.com. This is one big bad site! From basics to advanced effects this one has everything you need. The content is well arranged and the layout is nice. I can find my way around it easily. It also has a forum, so again, if you like posting, try them out ;)

Tutorial Categories:

2D Graphics
• Fireworks
• Flash
• Gimp
• Illustrator
• Paint Shop Pro
• Photoshop
• An other tons of items on 3d, coding, marketing etc…

Fresh Content: Daily.

• Tutdesk

This is a smaller site but with a good looking layout and some nice tutorials added from time to time. No forum, no user registration, simple and smooth.
Tutorial Categories:

• Adobe Photoshop
• Autodesk 3D Studio Max
• Dreamweaver
• Macromedia Flash
• Maxon Cinema 4D

Fresh Content: Weekly...

• Ps Lover

Another big site. This one is special in some way, it has the smooth look and navigation that everyone can handle, and it contains only Photoshop Tutorials. The content is a bit different compared to good tutorials and tutorialized so make sure you subscribe to their feeds ;)

Tutorial Categories: Only Photoshop;

Fresh Content: 1-5 days…

• Tutorial Quest

The tutorials found here are nice and funny most of the time. They have a forum and some active members, so check them out if you think you’re a poster ;)

Tutorial Categories:

• 3ds Max
• Flash
• HTML
• Photoshop
• PHP

Fresh Content: 1-5 days.

• Tutorial Index

This site has the worst layout ever.. But the content is the most important thing, so that’s why I am writing about this site. Now and then I find myself checking them out, and sometimes I find something really good here.
The site is big, it has a lot of content, and usually is updated daily.

Tutorial Categories: Photoshop and a lot of other programs.

Fresh Content: Daily.

• Tutorial4Me

A cool site that I came across a few days ago. Not big, not small. The sites is new I think… The mods are not the most active person on the world but the content is grate. Check them out from time to time, who know what you might find there ;).

Tutorial Categories:

• 3d Studio Max
• Adobe Photoshop
• Macromedia Flash
• Adobe Illustrator
• Corel Draw
• PHP

Fresh Content: 2-5 days.

I hope this information was useful. Leave a comment if you know more decent tutorial indexing sites. Thank you.

If you enjoyed this article make sure you subscribe to the RSS Feed to find out first what's new on photoshopxtremetutorials.

Labels: Basics, Ideas, Sites

In this tutorial you will learn how to photoshop your text to look like this:



Simple as always, this kind of tutorial only takes a few moments of your time and has only 3 layers, including the background ;).

Let’s get started!

Step 1.

Create a new Photoshop Document (File->New). Set it to have 500-550 pixels Width and 150-200 pixels Height. Fill the background layer with “#b7b7b7” (Edit->Fill).



Get the Type Tool and set the size of the font to 72 pt and use a bold-like font like “Cooper Black”. Write something down.



Add the following layer styles (Layer->Layer Style):




My result:



Step 2.

Ctrl/Command Click the Text Layer Icon in the Layer Pallet. Now draw a rectangle with the Rectangular Marque Tool holding alt. This will subtract from the total selection.



Create a new layer. Fill the resulting selection with white, and make sure you have the new layer selected while filling (Edit->Fill). Set the Opacity to 15-25% (Layer->Layer Style->Blending Options).



This is a nice outcome, and it’s fast. The style applied here will be added in a big package of styles that will be released early next year.

Optional Step 3.

You might want to add some color to this font style. To do that just go to Layer->Layer Style->Color Overlay and chose what color you want. Almost all strong colors go well with this style, so play with it a bit!



You can download the Photoshop PSD file here:
Photoshop PSD Download

If you enjoyed this Photoshop Tutorial support this blog by subscribing to the RSS Feed.

Labels: Step-by-step, Tutorials, Webdesign

In this tutorial you will learn how to draw a star for rating systems or other web-related elements. This Photoshop tutorial is one of my favorites because it has a really grate outcome, and I can say that I am quite proud of it! But enough talking, let’s start Photoshopping.

Let’s get started!

Step 1.

Create a new Photoshop document of 900x400 pixels(File->New), then create a new layer(Layer->New Layer) and name it “star”. Grab the Custom Shape Tool (U) and select the star shape. If you don’t see the star shape, follow the instructions from the picture below.



Draw a star; make it big so that it will take up almost all the height. Make sure that the path option is selected in the Custom Shape Control Bar.




Grab the Pen Tool and fill the path with black (#000000). The fill should go on the “star” layer not on the background.



Apply the following effect s(Layer->Layer Style):




My result:


The “empty” state of the star is done. If you want you can save this as a different document and then save another document with the “filled” state of the star.

Step 2.

Create a new layer(Layer->New Layer). Name it “fill”. Select the internal part of the star with the wand tool (W).



On the “fill” layer, fill(Edit->Fill) the selection with gray (#a9a9a9) and move “fill” under “star”.



Apply the following effects (Layer>Layer Style):




And optionally:



My result:



Step 3.

Get it ready to use by merging the 2 layers (“Fill” and “Star”) and resizing (Ctrl/Command T) the result. To maintain the proportions of the star, hold alt+shift while resizing.




For the empty star (without the “fill” layer) do the same merging but with the Fill layer set to 0% opacity or invisible.

Support this blog by subscribing to RSS feed.

Some of my results:



The PSD Files can be found here:
Photoshop Tutorial psd 1.
Photoshop Tutorial psd 2.

Labels: Icons, Step-by-step, Tutorials, Webdesign

This is the second part of the Xtreme Banner Tutorial. In this part you will learn how to create the navigation bar.

You can find the first part of the tutorial here.

Good luck.

Part 2: The Navigation Bar

Step 4.

Crate a new layer on top of Group 1. Name it “menubar”. Make a new group and place the new layer in it just to stay organized.



Step 5.

Ctrl/Command Click the Header Layer. Take the Rectangle Marquee Tool and make a selection similar to the one we’ve done for the glass effect.



Go to Select-> Modify->Contract and contract the selection by 2 pixels.





Select the” menubar” Layer and fill the selection with black (Edit->Fill).
My outcome:


We add some effects now. Go to Layer>Layer Style and:



My Outcome:



Step 6.

In this step we will make a button. Crate a new Layer in Group 2 and name it “butshape”.



Use the custom shape tool (U) to draw a shape like an arrow or something similar. For this tutorial I used a shape that is included in the standard Photoshop shapes.
Again, make sure that the Path Option is selected.



Pick up the Pen Tool and fill the path with white.




Add a simple white text.



Not it’s time to make the borders of the button. Crate a new layer on top of all the other ones in group 2 and name it “Border1”. Now take the Rectangular Marquee Tool (M) and select the following option from the Tool Control Bar.



Ctrl/Command Click the “menubar” layer and then make sure you have the “border1” layer selected.



Zoom In and make a 2-3 pixel selection.



Fill the selection with white (Edit->Fill).



Duplicate “Border1” (Layer Duplicate) and move the duplicated layer to the left using the Move Tool (V).



Do the same thing for the rest of the buttons and BAM! The final result:



If you have any questions or suggestions fell free to contact my via mail or by leaving comments. If you want to find out first what‘s new subscribe to RSS Feeds. I hope you enjoyed this and that you’ll find it useful.

Labels: Step-by-step, Tutorials, Webdesign

In this tutorial you will learn how to make a grate banner with navigation. This time, it will take a while longer (around 10 minutes) so I recommend that you get comfortable and read this first, then apply, because some of the steps done are a bit harder at the beginning. This is a medium level tutorial, because it requires a bit more knowledge about the layer pallet and about the vector tools, but don’t worry if you are a beginner because I will explain everything in detail.
The header has two parts: The title part, where the title and the logo should go, and the navigation part, where the navigation buttons go.

I divided the tutorial into two main parts:

In the first part of this tutorial we will create the main area (where the title goes).

In the second part of this tutorial we will create the navigation area (where the buttons go).

Let’s get started!

Part 1: The Banner Title Area

Step 1.

Create a new document with 800x170(175) pixels. Crate a new layer on top of the background and name it Header. This layer will contain the main part of the banner. Create a new group(CTRL/Command+G) with the Header layer selected. This is just for organizational proposes.


Step 2.

Grab the Rounded Rectangle Tool (Under the Pen Tool Menu) and go to the Tool Control Bar that is located under the application main menu (File, Edit, etc) and make sure that the “paths” option is selected.



Whit the header layer selected, draw a rectangle similar to this one.



Right-click it and chose fill. Fill it whit whatever you want. Just make sure it’s filled with something. I used black (000000).





Ctrl/Command + Click the Header layer, then pick up the Gradient tool and draw from top to bottom. The colors that I used are “447b30” (bottom - background) and “66bb29” (top - foreground).



My outcome:



Add the following effects on the Header Layer (Layer>Layer Style):





My outcome:



Step 3.

Create a new layer on top of the Header Layer, name it glass and Ctrl/Command + Click the Header Layer to select its content. Now with the Rectangular Marquee Tool (M) hold Alt and draw a selection over the bottom of the banner, similar to this:



Fill the selection with white, on the Glass Layer. Then set the layers opacity to 15-20% (Layer>Layer Style>Blending Options, and the Opacity slide, or Opacity Slide from Layer Pallet). Do note that the glass layer is in Group 1.



My outcome:



Step 4.

It’s time to add the title. Using the Type Tool, write the title of the website/blog/whatever. I’ve set the size of the font to 30 pt.



Add the following outer glow effects on the Font Layer (Layer>Layer Style>Outer Glow):



My outcome:



The first part is done. We have the title and the background of the banner and now it is time to work on the navigation bar. On the next part we’ll talk about that.
Go to PART 2.

Labels: Step-by-step, Tutorials, Webdesign