Saturday, June 19, 2010

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!

Saturday, June 12, 2010

How to Make Symbols Using the Alt Key



The Uses and Possibilities of The Alt Key

Have you ever wondered how bloggers, article writers, facebook and friendster users place ♥, ☻, ☺, ♠, ◘, •, ♣, ♦, copyright, trademark, pound, French characters, these kinds of symbols on their web posts, in forums, and even in their profile names? It is true that most ergonomic keyboards are only equipped with the English alphabet keys, numbers and some punctuation marks. So just how did they do it? Can you do it too?

Every character representation in a computer has some unique binary or hex value equivalent that the computer processor use to properly display the character to the screen. This binary or hex value representation or ASCIIequivalent is an established International Standards that computer manufacturers of processors, and peripherals must adhere to. ASCII stands for American Standard Code for Information Interchange. Yes, you guessed it right. You can enter these special characters by entering its ASCII Code!

Before we start, understand that we need to use your keypad buttons here for the combinations. For laptops which does not have keypad, notice that your keyboard comes with keys labeled and arrange just like the keypad. Usually its the keys 'U', 'I', 'O' , 'J ', 'K', 'L', 'M' that is labeled with number keys and it can be activated usually by activating Num Lock, or by pressing a special key associated with the special case of those keys. So, about the ASCII codes, I'll post here most of the examples, here's how:
NOTE: On how to actually enter the ASCII Code for the special characters, here's an example. For example for Ellipsis, the instruction says Alt, 0, 1, 3, 3. So what you will do is press and hold the Alt key then press numpad keys 0, 1 , 3, 3 pressing these keys in succession. After you accomplished these, release the Alt key, then the ellipsis is displayed.

Also note that not font styles vary in the special characters they give support to. Imagine if you're a font artist, and you would have to give all possible characters equivalent representation in your own font!
Also, some special characters may not be visible in Firefox and visible in Internet Explorer, or the reverse.

Ellipsis (...) is Alt, 0, 1, 3, 3
"EN" Dash (–) is Alt, 0, 1, 5, 0
"EM" Dash (—) is Alt, 0, 1, 5, 1
Pound (£) is Alt 0, 1, 6, 3
Cents (¢) is Alt, 0, 1, 6, 2
One-half (½) is Alt, 0, 1, 8, 9
Copyright (©) is Alt, 0, 1, 6, 9
Trademark (™) is Alt, 0, 1, 5, 3
Registered (®) is Alt, 0, 1, 7, 4
Bullet (•) is Alt, 0, 1, 4, 9
French accent (à) is Alt, 0, 2, 2, 4
French accent (ç) is Alt, 0, 2, 3, 1
French accent (è) is Alt, 0, 2, 3, 2
French accent (é) is Alt, 0, 2, 3, 3
French accent (ê) is Alt, 0, 2, 3, 4
German accent (ü) is Alt, 0, 2, 5, 2
Spanish accent (ñ) is Alt, 0, 2, 4, 1
miley face☺ is Alt, 1
Heart ♥ is Alt, 3
Diamond ♦ is Alt, 4
Club ♣ is Alt, 5
Spade ♠ is Alt, 6
Bullet • is Alt, 7
Bullet ◘ is Alt, 8
Music Notes ♫ is Alt, 1, 4
Sun ☼ is Alt, 1, 5
Pencil ( ! ) is Alt, 0, 3, 3
Scissors ( " ) is Alt, 0, 3, 4
Envelope ( * ) is Alt, 0, 4, 4
Smiley face ( J) is Alt, 0, 7, 4
Yin-Yang ( [ ) is Alt, 0, 9, 1
Check box ( o) is Alt, 0, 1, 1, 1
Bullet ( v) is Alt, 0, 1, 1, 8
Small bullet ( w ) is Alt, 0, 1, 1, 9
Divider ( –) is Alt, 0, 1, 5, 0
Divider ( —) is Alt, 0, 1, 5, 1
Bullet ( Ÿ ) is Alt, 0, 1, 5, 9
Bullet ( § ) is Alt, 0, 1, 6, 7
Astrological Symbols:
from ^ to i (Alt 9, 4 to Alt 1, 0, 5)
Heart symbol (¤) is Alt 0, 1, 6, 4
Heart symbol (ª) is Alt 0, 1, 7, 0
Divider heart symbol ( ¦ ) is Alt, 0, 1, 6, 6
Divider heart symbol (§) is Alt, 0, 1, 6, 7
Scissors symbol ( " ) is Alt, 0, 3, 4 (for coupon cutting)
Checkmark symbol ( 4 ) is Alt, 0, 5, 2
X Checkmark Symbol ( 8 ) is Alt, 0, 0, 5, 6
Star Symbol ( H ) is Alt, 0, 7, 2
Check Box Symbol ( o ) is Alt, 0, 1, 1, 1
Arrow Symbol ( Ü ) is Alt, 0, 2, 2, 0
Another Cool Bullet ( u ) is Alt, 0, 1, 1, 7
¿ - 0191
À - 0192
Á - 0193
 - 0194
à - 0195
Ä - 0196
Å - 0197
Æ - 0198
Ç - 0199
È - 0200
É - 0201
Ê - 0202
Ë - 0203
Ì - 0204
Í - 0205
Î - 0206
Ï - 0207
Ð - 0208
Ñ - 0209
Ò - 0210
Ó - 0211
Ô - 0212
Õ - 0213
Ö - 0214
Ø - 0216
Ù - 0217
Ú - 0218
Û - 0219
Ü - 0220
Ý - 0221
Þ - 0222
ß - 0223
à - 0224
á - 0225
â - 0226
ã - 0227
ä - 0228
å - 0229
æ - 0230
ç - 0231
è - 0232
é - 0233
ê - 0234
ë - 0235
ì - 0236
í - 0237
î - 0238
ï - 0239
ð - 0240
ñ - 0241
ò - 0242
ó - 0243
ô - 0244
õ - 0245
ö - 0246
ù - 0249
ú - 0250
û - 0251
ü - 0252
ý - 0253
þ - 0254
ÿ - 0255
Pencil is Alt, 0, 3, 3
Scissors is Alt, 0, 3, 4
Envelope is Alt, 0, 4, 4
Hand writing is Alt, 0, 6, 3
Smiley face is Alt, 0, 7, 4
Yin-Yang is Alt, 0, 9, 1
Ampersand is Alt, 0, 1, 0, 7
Check box is Alt, 0, 1, 1, 1
Bullet is Alt, 0, 1, 1, 8
Small bullet is Alt, 0, 1, 1, 9
Divider is Alt, 0, 1, 5, 0
Divider is Alt, 0, 1, 5, 1
Divider is Alt, 0, 1, 5, 2
Divider is Alt, 0, 1, 5, 3
Bullet is Alt, 0, 1, 5, 9
Bullet is Alt, 0, 1, 6, 7

Yahoo Messenger Hidden Emoticons

(You dont have to use the Alt key here, just enter the equivalent combinations and press enter)
puppy dog eyes:o3puppy dog eyes
I don't know:-??I don't know
not listening%-(not listening
pig:@)pig
cow3:-Ocow
monkey:(|)monkey
chicken~:>chicken
rose@};-rose
good luck%%-good luck
flag**==flag
pumpkin(~~)pumpkin
coffee~O)coffee
idea*-:)idea
skull8-Xskull
bug=:)bug
alien>-)alien
frustrated:-Lfrustrated
praying[-O<praying
money eyes$-)money eyes
whistling:-"whistling
feeling beat upb-(feeling beat up
peace sign:)>-peace sign
shame on you[-Xshame on you
dancing\:D/dancing
bring it on>:/bring it on
hee hee;))hee hee
chatterbox:-@chatterbox
not worthy^:)^not worthy
oh go on:-joh go on
star(*)star
hiroo->hiro
billyo=>billy
aprilo-+april
yin yang(%)yin yang
bee:bzbee
transformer*[..]transformer*
Still not using YMDownloadYM! Here!
Resources:
NewRadiance.com 
Squidoo Post By Barbara Casey