O2 Jam is one of my favorite game. In this game you can play your music do you like, from classic up to techo, from slow up to very fast. Besides it, you can practice your finger more thaw likes Mozart, Vivaldi, Beethoven , Bernstein and more …
In this tutorial, we will create favicons from capturing the game up to appear the icon in your blog.
Step 1 – Getting Started:
First, open your O2 Jam game normally. Then play your music do you like up to finish, when your score is appear presh “Print – Screen” key on your keyboard to capture the O2 Jam logo. Then close the game and open the windows explorer --> search your path installation on your disk “..\e-Games\O2Jam\Save”.
Open up your source image in Photoshop and zoom in to a comfortable magnification - you will need to get rather close to the image for this entire tutorial. Duplicate the background (i.e. image layer) and make it active in the layer palette. This will give you a backup to go back to in case you have any problems later.
Step 2 – Create Parts The Logo:
Whip out the Pen Tool with the 'Shape Layer' option set and begin tracing the character outline, making sure that you exclude all areas of background color. Don't worry about leaving the stray hairs outside - that's ok, as we'll be making new ones later.
Note: change opacity and fill = 0%, to simplifity your work and look like using Pen Tool with the “Path”
After you create all parts of the logo, resize / transform (Ctrl+T key) up to W = 265% & H = 265 %
Step 3 – Finishing Every Part:
1. Part 1 (Head – Right Hand)
* Inner Shadow --> opacity = 50%, distance = 13, spread = 0, size= 40, angle = -32 & check ‘use global light’
* Inner Glow --> blend mode = screen, color = white, technique = softer, source = center, choke = 51%, size = 73, range = 65, jitter = 33
* Bevel & Emboss --> style = inner bevel, technique = smooth, depth = 10%, direction = down, size = 38, soften = 3, angle = -32 & check ‘use global light’, altitude = 30, -->hightlight mode = screen, color = white, opacity = 75%, --> shadow mode = multiply, color = black, opacity = 75%
* Contour --> contour = gaussian, range = 100%
* Gradient Overlay --> blend mode = normal, opacity = 100%, reverse = yes, style = linier, align with layer = yes, angle = 90, scale = 78
2. Part 2 (Body – Left Hand – Back Shoes)
* Load Style ‘ Web Rolloverstyle’ --> ‘Neutral Glass Button’
3. Part 3 (Front Ears)
* Load Style ‘ Web Rolloverstyle’ --> ‘Blueberry Rollover’
4. Part 4 (Lamp on Left Hand)
* Inner Shadow --> blend mode = multiply, color = 304b98, opacity = 85%, distance = 11, spread = 25, size= 22, angle = 90 & don’t check ‘use global light’
* Inner Glow --> blend mode = multiply, opacity = 50%, color = 304b98, technique = softer, source = edge, choke = 0%, size = 8
* Bevel & Emboss --> styler = inner bevel, technique = smooth, depth = 100%, direction = up, size = 38, soften = 2, angle = 67 & don’t check ‘use global light’, altitude = 21, -->hightlight mode = screen, color = white, opacity = 100%, --> shadow mode = multiply, color = black, opacity = 0%
* Contour --> contour = gaussian, range = 90%
* Satin --> blend mode = overlay, color = 60acff, opacity = 100%, angle = 90, distance = 38, size = 38, contour = ring, anti-aliased = yes, invert = yes
* Color Overlay --> blend mode = normal, color = fd0000, opacity = 100%
5. Part 5 (Back Ears – Claws)
* Inner Glow --> blend mode = screen, opacity = 75%, color = fc7101, technique = softer, source = center, choke = 53%, size = 0
* Bevel & Emboss --> style = inner bevel, technique = smooth, depth = 21%, direction = down, size = 46, soften = 3, angle = -32 & check ‘use global light’, altitude = 30, -->hightlight mode = screen, color = fc7101, opacity = 75%, --> shadow mode = multiply, color = black, opacity = 75%
* Satin --> blend mode = difference, color = 333333, opacity = 55%, angle = -81, distance = 18, size = 21, contour = cone, anti-aliased = yes, invert = yes
* Color Overlay --> blend mode = normal, color = e9bf13, opacity = 100%
* Stroke --> size = 1, position = centre, blend mode = normal, opacity = 75%, filetype = color, color = black
Note: after that create more glossy effect using gradient tool --> click the layer+Ctrl key / select layer --> gradient tool = foreground to transparent, color = fc7101 --> Ctrl+D key / deselect
6. Part 6 (Head Band – Foot – Front Shoes)
* Inner Glow --> blend mode = screen, opacity = 75%, color = 020c71, technique = softer, source = center, choke = 23%, size = 0
* Bevel & Emboss --> style = inner bevel, technique = smooth, depth = 21%, direction = down, size = 46, soften = 4, angle = -32 & don’t check ‘use global light’, altitude = 30, -->hightlight mode = screen, color = white, opacity = 75%, --> shadow mode = multiply, color = black, opacity = 75%
* Satin --> as part 5
* Color Overlay --> blend mode = normal, color = 234585, opacity = 100%
* Stroke --> as part 5
7. Part 7 (Line on Head)
* Load Style ‘ Gel Rollover with Selected State’ --> ‘Neutral Glass Button’ --> open blending option --> color overlay = black
8. Part 8 (Eyes)
* Drop Shadow --> default
* Inner Shadow --> blend mode = overlay, color = cccccc, opacity = 50%, distance = 5, spread = 20, size= 5, angle = -90 & don’t check ‘use global light’
* Inner Glow --> blend mode = pin light, opacity = 45, color = 666666, technique = softer, source = edge, choke = 50%, size = 3, range = 1%
* Bevel & Emboss --> style = inner bevel, technique = smooth, depth = 65%, direction = up, size = 6, soften = 1, angle = 90 & don’t check ‘use global light’, altitude = 80, -->hightlight mode = linear dodge, color = white, opacity = 50%, --> shadow mode = soft light, color = 333333, opacity = 100%
* Contour --> contour = gaussian, range = 100%
* Satin --> blend mode = soft light, color = white, opacity = 100%, angle = 90, distance = 1, size = 5, contour = rolling slope-descending, anti-aliased = yes
* Color Overlay --> blend mode = normal, color = balck, opacity = 100%
* Gradient Overlay --> blend mode = normal, opacity = 100%, reverse = yes, style = reflected, align with layer = yes, angle = 90, scale = 125
* Stroke --> as part 5, change position = centre, opacity = 75%
Step 4 – Create Icons:
* Create new document 512 X 512 (px) background = transparent --> drag the O2 Jam logo --> save as “*.png”
Note: If you want save in “*.ico” you must have plug-in, because Photoshop does not come with the ability to save Window's icon (.ico) file formats as standard, so you need to download a plug-in before you can proceed.
Step 5 – Upload Favicons:
* Now upload this file into the base HTML directory of your website, together with your index/home page/ in your blog.
* So you should open the template and find the code
edit on HTML. This code located between and . If the code is not found, you must create the code. For your url icon, you can locate the code “http://www.yourdomain.com/directory/file-name.png”, change this url with yours. It’s support in png, ico, or gif format.
Now, you can create your favicon to appear in your blog
Tidak ada komentar:
Posting Komentar