Since university will be starting in two weeks, I think it’s better for me to write a quick tutorial on how I’ve made the new teddY-risatioN™ Zeta logo for the current theme.
Basically the logo is about an asterisk with six different colours – while the glamourous rainbow colour of teddY-risatioN™ Delta has faded into eternity, I’ve decided to preserve the rainbow-ish hues in the logo as to pay homage to the well-received but deprecated theme. Plus, colours are essential for the logo, especially when it’s placed in a theme which is majority painted in a dull, bland blue hue – colours help to add vibrancy to the header. The glow is intentional, and is best used against a dark background. For Malaysians, this logo might seem a little more familiar because I’ve drawn inspiration from the logo of Suria KLCC, a prestegious shopping mall located in the complex of the world’s tallest twin towers.
In this tutorial, you’ll be learning how to use Adobe Photoshop’s layer masks, as well as learn some basic skills of spicing up your logo design. Let’s get started now!
This tutorial will be written in short, sweet SEVEN steps :) so don’t worry about the length. You’ll be done in about 15~20 minutes. I’ve used a new method of writing tutorials – instead of directly displaying screenshots, I’ll be showing you how the actual image will appear. Screenshots are accessible by clicking on the actual images – they’ll open up in a lightbox.
Step 0 – Getting started
I’ve used a font called Anivers because I find it’s asterisk very sleek and elegant… and it’s free! It is also featured on Smashing Magazine’s 40+ Excellent Freefonts for Professional Design.
Step 1 – Create asterisk
Since we’re using scalable fonts (they are vectors!), you do not need to make the canvas too big as resizing does not make your logo lose any quality. Create a new canvas with the size of 300*300 pixels, or a size of which you are comfortable working around with. Use a dark background for easy viewing. In this example, I’m sticking to the good ol’ black.
Select the type tool 
, set the font to 500 in size and type the asterisk (*) sign. If the asterisk does not appear, this means that your textarea is not huge enough – try dragging the handles on the corners to expand it until the asterisk appears. Center the text and make sure that the asterisk is in the smack middle of your canvas. Don’t forget to name the text layer as ‘Base ref’ – it’s useful later on!
Step 2 – Layer Mask
Do not panic if layer mask sounds unfamiliar to you. It’s actually a very simple function – you can pick areas of an image, a layer or a text to be displayed. Since we’re talking about six different colours for each individual ‘wings’ of the asterisk, masking each ‘wing’ is essential.
First of all, you’ll need to duplicate the ‘Base ref’ layer, and name it ‘#1′. For the ‘Base ref’ layer, set its opacity to 20% or less so that it’s still visible for you as a guide for layer masking. Without it, you wouldn’t know where to do the masking.
With the ‘#1′ layer selected, go to Layer > Layer Mask > Hide All (see screenshot). Immediately the white asterisk will disappear, leaving a greyish one behind – that’s the faded one for on the ‘Base ref’ layer. When you’re done, you’ll be able to see a black square right beside the ‘#1′ layer (see screenshot) – meaning that the layer has been masked and so, invisible.
*Alternatively, you can choose to create a layer mask by clicking on the Layer Mask icon at the Layers window (see screenshot). After that, click on the white square that appears beside the layer and then press [Ctrl] + [i] to invert the image, thus arriving at the same result.
Step 3 – Unmasking Fun
Now the fun begins. Press [D] to reset the colour palette, so that foreground colour the black and background colour is white. When you’re done, click on the layer mask of ‘#1′, which appears as a black square in the Layer window. You should observe that the colours of the foreground and background colours have been inverted. Make sure that the foreground colour is white, because you’ll be painting over the black areas in the layer mask.
Select the Brush tool 
and pick ‘Hard Round 19 pixels’ and set the brush size to around 35~40 pixels. This is when the ‘Base ref’ layer comes into good use – without it, you wouldn’t know which part of the layer to paint. With the ‘#1′ layer’s layer mask in focus, carefully paint over the top ‘wing’ of the asterisk. You should see it turn white.
When you’re done with layer ‘#1′, duplicated the layer, rename it ‘#2′, focus on the layer mask and use an eraser to remove the area painted white. Now carefully paint over the second ‘wing’. Repeat this step until you’re done with all six wings, and you should get something like this.
Step 4 – Start colouring!
Hide all layers of the partially masked asterisk except for the first layer, ‘#1′. Hiding of layers can be done by clicking the eye icon 
adjacent to each layers. Select the asterisk using the type tool again to highlight the text. Change the colour to red – I’ve used #bb2424. When you’re done, hide this layer and unhide layer ‘#2′ that is above it and repeat the same steps but for different colours, until you’re done with all six layers. I’ve attached the exact colours I’ve used for my logo design below:
*Note to advanced users: if you’re looking for speed and efficiency, you can do the colouring as you duplicate each asterisk before applying the layer mask.
Step 5- Make all layers visible
After you’re done with the colouring, make all layers visible and you should be able to see a beautiful colour wheel! We’re almost done with the tutorial, but the next step is simply some glorification work :) and has nothing else to do with this design anymore.
If you realised that there are bits of white appearing within the coloured wings, this means that you have not masked the layers properly. Don’t worry, what you need is just to access the layers (the ones from #1 to #6) and use white to paint over the layer mask of the affected layer. When you’re done, make the ‘Base ref’ layer invisible since you no longer need it.
Before you proceed to the next step, it is tantamount that you SAVE your work, either in .PSD or .TIFF format.
Step 6 – Post production
Merge the layers from #1 to #6. This will rasterise the image, and that’s why I’ve asked you to save your logo earlier on. Rasterising will cause the asterisk text to be transformed into pixels, and thus will look visually unappealing when scaled to a larger size. Rename the merged layers to ‘Rasterised’. Duplicate the layer and drag it above, renaming it as ‘Rasterised Glow’.
We’ll be applying modifications to the ‘Rasterised Glow’ layer. Increase the brightness of the layer by +75, through Image > Adjustments > Brightness/Contrast… and then apply the gaussian blur filter through Filter > Blur > Gaussian Blur. Set the radius to 10. Finally, reduce the opacity of the glowing layer to 50% or lower, depending on your preferences.
Guess what, you’re done!
Extras
To achieve the effect of the logo I’ve posted at the start of this tutorial, try experimenting with Drop Shadows, some degree of Interneal Glow (all applied to the ‘Rasterised’ layer). Paint the background with a dark gradient. To add the glossy effect, visit Glossy Logo Tutorial, or just draw a shape (preferably eliptical), create a gradient overlay (transparent to white) and then reduce the opacity.
I hope you find this tutorial useful! I’ll be writing a part two to this tutorial, and it’ll probably be up next week. Stay tuned! :razz:
I’ve never learned how to use masks.. So this is helpful! And no, no, nothing as sophisticated as diffused glow filter.. I don’t even know what that is! I did the whole gaussian blur and then reduced its opacity thing.
Thanks! I hope you find it useful, heheh. Actually this is my first time using layer masking as a design technique – I’ve never find it useful until I needed it to create that special logo.
Diffused glow filter can be accessed via Filter > Distort > Diffuse Glow. Basically it lightens up the lighter areas of your photo, thus making things appear to ‘glow’. Oh and the gaussian blur technique you’ve mentioned is interesting! I rarely use it until I’ve read on design magazines about it’s importance… wow, you’re ahead of me!
I like how u made it all glossy and shining! woot :)
Check out AdrianC’s last blog post: exam pms
I have never used masking before! Great tutorial and I love the font. :grin:
Nice one. I’m going to give this a try with a motif I’ve been thinking about for the new Sciencetext logo…thanks!
Check out David Bradley’s last blog post: GTalk Cannot Open Websense
U are a pro! Exelent :)
Altough u should not say your secretes, i mean now new web sites will pop with your logo in it ^^
Check out Basilakis’s last blog post: Summer Life, ???????????? ????????????????????
Very cool! I rarely ever use the mask function. I think I’ve only used it twice in my life when I was learning to use Photoshop’s functions. Most of the time, my vectors on Photoshop are done the lazy way. Trace using the filled pen tool with the color pre-chosen. That way it’ll still be a vector and I don’t have to worry about layers since the pen-tool takes care of it for me. But good stuff! I shall try making vectors seriously using masks on Photoshop sometime. :)
Check out Ivy’s last blog post: Fat Fines: Japan’s New Law
Same here… the function closest the masking I’ve used is QuickMasking since it’s really useful when it comes to touching up photos. But one bad thing about QuickMasking is that you’re making edits directly on the layer itself, so there’s no turning back except for the Undo button. But for Layer Mask, the masking is done on a separate layer and so the pixel data on the original layer is not affected. I hope I’m not complicating things here!
I’m yet to learn how to use Pen tool, besides for several really basic uses. Your way of using it just reminded me that I’m only familiar with less than 50% of photoshop :razz: heh!
Geez I’m such a newb when it comes to Photoshop. One of these days I’ll end by dependence on Paint Shop Pro and move to the big leagues with you guys.
BTW, is it just me or is the site loading a bit slow?
Check out Bush Mackel’s last blog post: What Went Right – Digital Oil PM Pt 2
Actually I think GIMP, a free Photoshop-ish programme, also have the Layer Mask feature, so don’t worry if you could not get a copy of Photoshop. The site is indeed loading a little bit slow yesterday, I heard that my host is doing some maintenance. I hope it’s okay today!
very good tutorial teddY
I have recently been looking around on logo tutorials and found another good one here: http://www.nicora.net/index.cfm?method=article&blogID=C88F54CC-D998-BFC0-D995-3823E52FA483
have a good day
Check out Yunia’s last blog post: My week in pictures
Wow thanks for the link Yunia! It’s another good one on creating Web2.0-esque logos – basically what you need is to create a glossy effect via gradients. However, the shadows are a little too dark and strong for my taste – they could be a little lighter ;)
I’m stalking you…just so you know. :mrgreen:
@AdrianC
Thanks! Blame it on the Web2.0 effect ;) suddenly all the logos becomes glossy and shiny!
@Rilla
We’re not too far apart when it comes to dealing with layer mask! This is my first time using masking for serious design purposes. Usually when I touch up photos, I’ll stick to quickmasking, which isn’t really recommended. The font is really cute, isn’t it?
@David
Thanks for dropping by! Isn’t your logo nice enough? If you need help in any part of your new design, feel free to contact me – I’ll be more than happy to help!
@Basilakis
Aloha, thanks for the complements buddy! Regarding the trademarking part of the logo… hmmm I believe everyone will learn how to use the technique instead of just copying my design – I have good faith in my readers :) anyway wouldn’t it be stupid if someones just copies my logo only because I’ve written a tutorial about it? That speaks a lot of his creativy, LOL!
@Heather
Gosh, I’m so terrified! See ya on Plurk!
i like this new logo of yours :) love the spectrum of colours :mrgreen:
Check out Michelle’s last blog post: It’s Finally Over and Done With
hah! nice tutorial, but i think to me is more comfortable using illustrator . huhhu :eek: (i not really good designing using photoshop)
Check out razifmustapha’s last blog post: Hotshots
@Michelle
Thank you :) it’s inspired by the colourful scheme of my previous theme… and for the shape, by KLCC’s logo.
@razifmustapha
We’re so different :D I don’t feel right using Illustrator for some reason… prefers to stick to Photoshop unless there’s a dire need for some features exclusive to Illustrator. I’m not good at Illustrator, lol!
p/s: Congratulations for having your photo featured on Digital Camera Magazine! *throws confetti*
Thanks for being generous enough to show us the technique behind your favicon. Seriously, when I see the basic colours of the rainbow backed up with a brilliant blue I think of you. Haha! =)
Great tutorial! I am not thinking of changing my favicon anytime soon, but if I do get that spark of inspiration, I’ll be sure to refer to your techniques.. with the appropriate credits, of course. =P
Check out Id’s last blog post: A Summer Place.
Thank YOU :) for your compliments! You’re always so kind and supportive! Anyway, your favicon is really nice and is a piece of art by itself, I don’t see any urgent need to change it ;) heheh.
Awesome. Thanks for sharing the technique with us. :) I thought you’d used the pen tool or something. Never even crossed my mind that it was actually a font.
Check out Lexie’s last blog post: From Wordpress to ExpressionEngine
Nah, I wish I could use the pen tool to create something so nice! ;) That’s why I’ve been searching up and down, high and low for a font because it’s a vector and doesn’t need me to play with the troublesome pen tool… I’m yet to learn how to play with the handles to make curves appear the way I want.
cantik logo tu. nice one. huhu.
Check out tukangfitnah’s last blog post: khairy jolok bontot saya! – bala
that was awesome. the colours do blend very well with your blue background. why not make it moves like a gif version ? that’ll be so cool isn’t. hehe :mrgreen:
Check out KNizam’s last blog post: The Day My Streamyx Connection Line Went Kaput ! So Tension Lor…
I must have you have a mind of an artist! I’ve mentioned in the tutorial to look out for part two because that’s when I’ll write about how I’ll get the logo animated :) like the cute Web2.0-esque loading icons. Teehee!
Wow, it’s amazing at what just one can do with typography alone. As I read this tutorial I imagined the way to do it in Illustrator. I can’t wait till http://www.w3.org/Graphics/SVG/ gets supported by the other browsers rather than only Firefox! :grin: It’s basically vectors for the internet, which would make scaling them no problem at all!
I think I’ll scamper off now and play with some nifty fonts in Illustrator, see if anything gets created. Your post inspired me. :grin:
Check out Hanne’s last blog post: Internet Explorer For Mac OS X
Actually it’s very possible to do it in Illustrator. I guess what you need is to create a vector shape of one of the ‘flaps’, duplicate it five times and rotate each of them 60 degrees relative to the previous one :razz: SVG graphics is extremely promising because it’s not only scalable, but you can influence it through javascript and dynamic HTML. Now that’s interesting! You can apply certain effects (like blur, glow, or gradients) to an image upon a mouseover event and etc.
Too bad only Opera supports SVG. Firefox and Internet Explorer are yet to provide built-in support for the format. Nonetheless, I strongly believe it’s the image format for the future!
Thanks for your comment. :)
I transferred my posts and comments to EE from Wordpress using the WP-Export-MT script. Just upload that where wp-config is located and load the script from there and you’ll be able to download a text file containing your Wordpress content. You’ll be able to import that using EE’s import utility. :)
Check out Lexie’s last blog post: An afternoon lesson and pretty dresses.
Thank you Lexie for sharing the process! I’ve heard from EE users that there’s no import function for WP blogs, and vice versa from WP users ;) that script you’ve link will be really handy! I’m now thinking of installing ExpressionEngine on one of my subdomains and play around with it.
Definitely give it a try. :) If you need help (just in case, but EE is really easy to get the hang of), you can find me on Plurk. ;)
That was great! Power to the layer mask!