Ozzu Logo Contest

OoO, now that I see that I do love it, especially the first one! You've got my vote!

Here here! one or three are by far the best i've seen...besides mine...hehehe just kidding yours rule!!!

Oh very nice, thanks for the sneak peak of it integrated right in the site

Mind sharing with us what font you used, and how you kind of went about designing it? I am curious

I really dig that font and how you made it fade back into the gray on the right side to fit perfectly back into the forums design.

hrmm maybe you could incorporate 1 and 3 it so the image would be red if there were new posts!

the 3rd one matches the forums colors better.. Yeah i have no clue how you blended it into background.. Your no amature

gradient black to transparancy used with a layer option.

Well, it looks like it's either site1.jpg or site3.jpg (I have no objections, I love both those the best also ), so I'll explain how I got to site3.jpg first, then I'll explain site1.jpg (you have to get to site3.jpg before you can make steps towards site1.jpg.

site3.jpg:

1st step: Getting a hold of the background so the image will slowly fade into what BWM has to the right. I set my resolution up, take a screenshot, then in Photoshop 7, zoom in to about 800% on that and find the point where the browser borders are and where BWM's title image ends (which I found was actually shorter than the background image his blends into, so I extended to where the bg image ends, about 106 pixels). You simply mark those borders with the guides. Now, since I have the guides, I can make a quick selection of the part of the screenshot where BWM's background image keeps repeating. Copy and paste that into the whole bar, keep filling until it's all filled and just looks like BWM never even put up the "Ozzu Webmaster Forum" text. At this point, I cropped the image down to the 106 pixels by exactly 600 pixels (BWM's goes about 690 pixels, but it's the bigger version that's not meant for 800x600 resolutions). 600 pixels leaves room even in 800x600 for the chicken (? ). Now starts the complicated part, from this point, you can do virtually any design you want so long as it fades to the gray screen line background completely at the right. I set down the text first, selected font "Banco" (not sure where I got it, just looked good). I normally put down the text, then when I'm finished I scroll through my fonts to find the one that fits it best, but I took the opposite road this time. Making a new layer, I proceded to lay down my fading background by using the gradient tool set to do one color fading to transparent. Click and drag from the left to somewhere within your borders on the right.

Quick Newbie Note: It really doesn't matter what colors your using when you first lay down your structure, you can always ctrl+click the layer to select the transparency and fill with another color if your using certain layer blending, otherwise simply right click the layer, select blending options, and select color overlay. I did white text at first (default color) which I changed later, and I did a white gradient, which I also changed later.

At this point, if your actually doing this in photoshop, I bet it looks like a piece of *plum*. Just give it time. Okay, another new layer, but first, select the layer with your text and lay down more guides (4 more, each snapping to a edge of the text). I guess you could of done this in an "analog" way, but I'm obsessed with mathematics in geometry, so I clicked my info tab (next to navigator in the upper right corner), and while I was dragging each guide outward, I watched how far I was moving it and moved all of them 10 pixels out. Now create your new layer. Use the selection tool to select the area encased by the 4 guides you just layed down. Now go up to Select->Modify->Smooth and put in 10 pixels. Then ctrl+bksp (or alt+bksp for your foreground color) to fill the selection. This time it would be handy to select the color black before you fill. Anyways, this one you can not use color overlay, if you used another color, change to black and fill again. I'll explain why in a minute. At this point, believe it or not, it's almost done. All that's left is modifying colors if you haven't already, and putting in the layer blending options. Hopefully you have the text layer on top, move it there if not. Select the blending options for that layer, select "Stroke" and set it to 2 pixels wide and set the color. If you didn't make your text black like I did, also select "Color Overlay" and set the color to black. Click okay, we're done with that layer. Now select the blending options in the layer with your inner box we used black with (the one that is going to be transparent). For this one I used another stroke with a width of 1 pixel (white). Click okay, your done with that one. Now the background, select the layer, if you haven't selected your color yet, ctrl+click the background layer, and fill it with your color. Select the background's blending options now, and this time we use the Pattern Overlay. I got the best effect when I used the Luminosity blending mode for this, then select your favorite pattern (or make your own consulting Photoshop Help). Scale it as big as you want then click okay. Now for the last step. We didn't use color overlay on this one because when you mess with blending effects, for some reason any layer blending options you set aren't effected by the overall layer blending mode (probably why you can set the blending mode on each individual blending option). My final result ended up not using any layer blending modes, but it's always better to be safe than sorry. In order to get the rounded box to be transparent at this point is either to set the layer transparence to 50%, or set the layer fill to 50%. I went with fill because it didn't effect the stroke I set on the layer earlier. Finished.

site1.jpg:

Starting where I left off on site3.jpg, now you toggle the visibility of your text layer, then ctrl+click it to select the transparency. Now select the transparent black inner box layer and hit Delete. this creates a nice little hole in the shape of your text through which you can see through if you turned off visibility on your text layer. Because we had a stroke on the transparent box, it now stroked the letters also. You can tweak what you want from here, but it's basically finished.

Hope that helps a few of you with both photoshop, and with graphic design tricks. Again I would like to note that I am more of a backend database programmer than a graphic designer. If I can do this, anyone can.

Thanks for the extremely detailed explanation. I appreciate it

One last question, would you happen to have the psd file version of http://tierra.gnuk.net/ozzu2.jpg so that I can mess with the compression from the original?

The jpeg quality was set at 10 (pretty high quality for most jpeg), but the saved PSD I have is the final result which was http://tierra.gnuk.net/ozzu4.jpg

I went ahead and reversed my steps, and saved one pretty close to the original, but it's not exact.

http://tierra.gnuk.net/ozzu2.psd

Ohh, and I also wanted to note the other submissions that I really liked.

Fusion's kicked ass though BWM would of had to of redesigned the entire site to make use of it, but I love that style of design: http://www.fusion-netwerx.com/testing/images/ozzu.jpg

Norb's 4th design if it were toned down a little on the light (it is going on a dark template as it is) would be awesome... it's pretty cool as it stands: http://norb.planetaclix.pt/ozzu-nms4.jpg

I would of liked to of seen cowkiller's designs, but they all turned up 404.

I did like a lot of the others, but there wasn't a lot posted to really match the site. I really think that's the reason BWM has held off for so long.

thanx alot tierra, i do agree with you.. cause my design was totaly wrong for the site, but i dont want to make another, cause i have a slighty different erm style.
but tierra, good stuff

I tried, but I’m not good with darker colors. The site has a simplicity that I just can’t seem to grasp. I always end up clutting my stuff up. Nevertheless, I *did* try, and had some fun doing so. Whee<a href="http://www.neogoddess.com/tempimages/ozzufull.jpg" target="blank"> Screeny</a>

Not bad, I like the spelling of forum in your graphic.. hehe (fourm)

Damn, Damn, Damn! Good thing I’m am official moron, else I might actually feel bad about my horrendous spelling. Now with this certificate of mindlessness I can just laugh it off. Ha...

<a href="http://www.neogoddess.com/tempimages/oz.jpg" target="blank"> Fixed</a>