Monday, September 15, 2008

Some techy tips

So I redid my theme again (if you're reading this in a RSS reader then you can't see it, too bad for you). I redid it for fun, for the challenge of it.  Tara had asked me to change some of the profile pages of some web forums/groups that she is apart of.  I decided my blog, as lax as my posting is needed a refresh anyways.

Now you may know lots about how you to go about designing a web page, I am largely ignorant of how it's "supposed" to be done, but I thought I would share what I do to help tie stuff together.  I know next to nothing about HTML, but what I'll share is how I come up with the picture and colors of what I'm doing.

I started with a layout that I largely liked that blogger has in the standard templates (I'm using the "Tekka" template from blogger).  I then added the gadgets and stuff on the right over there that I wanted.  (Although I may change that stuff too). 
Then with me being me, I took a picture I want to use as a header picture.  I rescaled and resized the pictures to fit the header frame.  For that I use the GIMP; then once the picture is in the right size, I adjusted the pictures just a wee bit to make the colors "pop" a little more.

This is the original photo from my Flickr stream, this photo is as it came out of the camera, no tweaking:

apples 1

  1. Then added the text  I wanted to include, in mine I used two fonts, I used white as the text color here. 
  2. I copied the text onto another layer, inverted the color, so it went from white to black, offset that black layer a little to make a shadow.  
  3. Then I made a copy of the black text layer and blurred it using the gaussian blur in the GIMP, (although photoshop elements has the same thing) and offset it a little further.  
Then saved the GIMP file to keep all the layers intact (that way if you decide to redo the picture then the work you did on the text is the same).
Then saved that file as a jpg and loaded in the header space (in my case I wanted the picture INSTEAD of the actual text because my picture contained the title of my blog)

For choosing all the colors, which for me is one of the most daunting parts of the whole affair. Or at least it was until I found this really cool little website that creates color palettes for you based on a picture you choose.

You can find it here

Big Huge Labs has a whole mess of neat tools to play with your pictures.

So I gave the palette generator my header picture and it spits out fifteen different colors all of which are present and match your photo.  It gives the "hex color code", which is a alpha numeric code for the colors that our web browsers use. 
Then I open up the font & colors part of the layout menu and start pasting the new colors in.  After a few minutes of choosing which colors you want for what parts, you now have a customized blog/profile page for yourself.

I have done this on my twitter page, Tara's twitter, and one or two of Tara's online profiles.

Clearly not the greatest profile customization ever, but in my opinion better than the stock setup as it includes one of my own pictures, in Tara's case I used the same picture patterns as the custom blog template she won some time ago from Shera at Sweet and Simple designs.  I am fairly certain I could not come up with graphics like that on my own... I use a camera, and the method I'm describing above I think would work best with photos, but you can prove me wrong if you'd like.

I know for some of you, you knew how to do this, but maybe it'll help someone.
Have fun!


Tara said...

you know you are my hero honey :)

DhoyM said...

You really did a good job. I love that color. I was thinking of using that same color in the room I'm planning to paint.(no kidding)