How to Make a Nice Looking Web 2.0 Seal for Websites

 

Hi you all! How's your weekend? I hope you had a fun weekend! Anyways, let's get on today's lesson!
What we have here is another seal. This time, a more wonderful looking seal compared to last week's tutorial. As usual, you can still apply this seal on websites typically for discount tags, or to presentations when you want to emphasize something, you put it on a seal.

But before we start, let's enumerate the things we want to achieve to get the seal that we want:

1) Polygonal circle
2) Gradient Inner color
3) Glossy Cover
4) Outline
5) Shadow
6) Good color combination and contrast

So open up your Photoshop or any other graphics editor you are comfortable with.

     Now, conjure your 'Polygon Tool' as shown above.

     Then set your 'Polygon Tool' option as 'Star' with Indent sides at 20%, and with 20 sides as shown above. That way, we should have a nice looking polygonal circle.

     Start drawing your Polygon Circle on the canvas. And right click on it to turn it into 'New Selection'.

     Now get the 'Gradient Tool' and choose some nice dark color. In this tutorial, I used violet.

     Set your gradient option as shown above. Color to White, or in this case, Violet to white gradient to achieve a nice falloff effect on the Seal. Apply the gradient on your selection from bottom to top.

     You should have now something like this. A polygonal circle with violet to white gradient.

     Without losing your current selection, get the Ellipse Tool.

     As shown above, get your 'Ellipse Tool' which shares the same sub menu as the 'Polygon Tool'.

     As demonstrated, drag the ellipse just above the seal slightly to the left as shown above. Remember never to lose your previous selection while making the ellipse shape because we would want to intersect both selections.

     After making the ellipse shape, right click on the ellipse shape and choose 'Make Selection' to get the dialog shown above. Since we would want to intersect the two selections to get the upper left region of the seal, choose 'Intersect with Selection' and hit OK.

     We now have this new selection. Guess what we will be doing next! Apply the gloss effect! 

     Get the 'Gradient Tool' once again and this time, choose the Gradient Option of Color to Transparent so it is essential that you choose the color White from the color palette.

     Apply the White to Transparent Gradient Tool to the intersected selection of the seal. Do it from top left to bottom right depending on the effect that you want to achieve. You should have something like the one shown above now. We're almost done making our website seal!

     Right click on the layer where your website seal is situated. Choose 'Blending Options' and check the checkbox for 'Stroke' and set the settings as shown above. Since the base color of the website seal is violet, then we want a lighter version of that color to be its outer rim stroke so in this case, we chose Pink. 

     Also, add some 'Drop Shadow' by checking its checkbox.

     And finally, just add some text. Make sure that your text color is light, in this case, it is white because we want to achieve a proper contrast that's nice to look at. 

     Now, we have the beautiful website seal!

     Just a Note: It's always better to keep the number of characters you enter in the seal to a minimum. Just like the example, it's only 3 letters which is obviously an abbreviation of someone popular ^^. Anyway, your interface should be clean, that's the point.

     I hope you learned much from this tutorial! Have a good day!

How To Make Vista Style Content Layout Using Photoshop

     In this tutorial, we will make a layout similar to the effect you'd find on Windows Vista. We can use this concept that we will going to learn on website design, powerpoint presentations, and virtually anything that needs a layout with the sleek Vista style such as shown below. In this tutorial, we'll use Photoshop as a tool, but basically, any graphics editing program will work just as nicely.

     To describe the finished layout, what we have is a great background, then a foreground layout that consisted of a white and opaque header which seems to blur the background image behind it, and the content area colored in opaque black that darkens the background image behind it. We also included sample texts.

     The first step would then be to look for a suitable background image with a decent resolution. In this example, we used the Vista-Grass image that is included on a Vista installation. We are going to use this for this Vista-style layout tutorial.

     Then, choose the rounded rectangle tool from your Photoshop tools at the left side. After choosing the tool, make a selection of the rounded rectangle to find the content area. After making the shape, right-click and choose Make New Selection.

     There we have now, our selection of rounded rectangle that determines the header part of the content.

     Then let's choose the Selection Tool from your Photoshop tools at the left side. Then choose Intersect option for the Selection Tool. Intersect means that the intersecting parts of your current selection and a previous selection, will result into a new single selection. So now, I guess you get the idea. 

     Right, we make a rectangular selection on the previous rounded rectangle selection that we had from earlier steps, only that we exclude the lower part of it so that we will not include the rounded corners at the bottom.

     Before we do anything to our new selection, let's fill it with color, in this tutorial, we chose white so proceed to choose the Fill Color tool at your Photoshop tools as shown.

     Then make sure that before you apply the Fill Color, you set it's opacity to around 61% so that the header will have a see-through effect to the background image.

     Now, let's add the blur effect. As shown in the above screenshot, it's a simply Gaussian Blur. Just play with its settings and decide for yourself the right combinations.

     You should have this effect right now. So the remaining task is for the dark content area. Just do the same steps you did for the header EXCEPT the Gaussian Blur and that the fill color is Black or Dark Gray.

     After adding some text, we have now an amazing layout great for any content. It also works great with images! Notice by the way, that for a dark background, you need a light colored text, or in other words, good contrast that is for readability purposes.

Now start making your websites, powerpoint presentation slides, or whatever layout you can think of, and practice your photoshop skills!

     I hope you learned something from this. If you have comments or questions, please post it here or you can send me an email at adriantheelite@yahoo.com. Thanks!