Tuesday, July 22, 2008

Pimp My Blog

Since the day I started this blog, I have been trying to reconstruct the overall look and design of the blog, phases by phases. I introduced a few minor elements such as the chatterbox, a work schedule table, some links and even reserved a small gap for advertisement - even though I am earning RM0.00 out of it due to insufficient visitors - to make the blog looked much livelier.

Unfortunately, they were all in vain as nothing bugged me more than the blog header that was packaged along with the template, which I deemed to be too plain and dull-looking.

After spending approximately 9 hours of clicking around in Adobe Photoshop Elements 6.0, I was finally satisfied with the new blog header.


Photo was taken during my visit to Tropical Spice Garden almost a year ago.

Filled with joy, I uploaded the new header and guess what did I see?


Serious misalignment WTF?! *facepalm*

As this was an issue with that particular template, I was left with no choice but to migrate to another one. *sigh*

Anyway, do give me comments about the new blog header. It was my second attempt in editing photos using the Adobe Photoshop Elements 6.0 hence there should be ample of room for improvement.

9 comments:

Anonymous said...

You want the comments of someone who's working in a designs studio? :P

Frankly speaking, you pretty much kept your background pic the way it was. As far as I can see, you didn't apply any "effects" on it at all. Probably, the outcome you want anyway. As for your title, it looks fine. But the font appears to be "broken" (bottom left of the D". Rasterization problem?

:D

(e+ho)ng said...

@daniel boey:
Yes, please fire away! :)

The reason I chose this photo as the header background was due to the matching colours it had with the old template. Alas, the old template betrayed my effort. :'(

I did try changing the photo's hue and brightness but ended up cancelling them away. Now that you mention it, I have a feeling that the green is too bright... am I right?

Do allow me to list out the steps I did with the hope that maybe you can tell me where I did wrong:

1. Shrink the photo to my desired size of 740px wide.
2. Crop the middle part with height of 300px.
3. Open a new blank file with black background and write the font out.
4. Use a new layer to outline the red font with white brush.
5. Merge all the layers & copy the font to the cropped photos.
6. TADAA~

What steps did I miss out? How do I avoid rasterization effect? :O

Anonymous said...

Not bad for the header pic.
it looks simple & nice :-)

However, i do feel that is like 'Dragon without tail'...like something is missing, but i don't know that is that....

Anonymous said...

Step 5, the brushing probably caused unevenness of the outline.

Here's my take, and mind you, I'm a programmer. I can't match with the designers in my studio >_<

Take a look, I can drop you the psd file too via email or msn if you want.
http://img292.imageshack.us/img292/516/indesighsivenessxi5.jpg

(e+ho)ng said...

@~~詠鉌, 新旅程~~:
Could it be due to the big empty space at the bottom right corner? :(

@daniel boey:
Wow... what tools did you use to outline the red fonts? They looked so much more uniformed than mine. :P

Was it done using Corel Painter?

I also noticed that you decreased the background brightness a little. Was it done in order to make the fonts stood out?

Hmm... do you think that it will be a good idea if I were to make a thin black outline on all the fonts to put a border between the white and the background?

Anonymous said...

Adobe Photoshop CS3. I re-did your banner from your original background image, not with the banner you've already made.

I changed the color curve a little to sharpen the image. The original looked a little overexposed to me.

About the font, yeah you can however it'd conflict with the red font. The white is already the outline for it. Giving it another outline would be overly complex. How about adding an effect to the text instead, like a drop shadow perhaps? Since the lighting from the image appears to be coming from the right.

And, about what your friend said, yea it's probably that empty spot but then again, that's still the effect you're after and I think it's fine. You might want to consider moving the flower towards the lower left and text towards the upper right corner. Makes that space not so obvious since there's plenty anyway.

We'll talk about it over MSN :P

Anonymous said...

environmental friendly eh?

(e+ho)ng said...

@daniel boey:
I am afraid that there is almost no chance for us to discuss through MSN since I am on night shift. :S

Mind to tell me how did you create the white outline for the red fonts? I cannot seem to find that function in Adobe Photoshop Elements 6.0. :(

I do not think a shadow is appropriate since that will make the fonts looked as if they are floating.

If you noticed in the original photo, the space taken by the flower petals were quite large. Hence, the current cropped dimension is more or less the best I could do. :(

@32686:
You want me to put up a header with an image of serious pollution? :D

(e+ho)ng said...

Some updates regarding the blog header. Since they are still related to this blog entry, I shall resume here.

Update#1:
I converted back to the old template and managed to fix the header coding. No more misalignment. :)

Update#2:
I prepared a few samples of header with various fonts and contrasts. I guess the current displayed header is the best that I can come up with. :S

One complaint though. I found out that images would not necessarily appear to be as nice as they were supposed to when I uploaded them as headers. I wonder why? :(

Nevertheless, I am much more satisfied now. :)

Anway, do fire your comments away please.