or

"Hey, I can do that!"


Tuesday, June 7, 2011

Trying a New Look

Trying a New Look

It's frustrating as a cake blogger to look at other cake decorating sites or similar blogs on the net ... either they make me want to stab my eyes out in text flashing horror or make me cower in envy from their pure awesomeness.  There's a huge gap in the range of awful and spectacular.  So here's me trying to move my site from one side of the spectrum to the other.  I'm taking a more aggressive role as web designer / photographer / graphic artist.  Note that I'm purely an amateur in all 3 fields, but I'm lucky enough to work with some professionals ... but it's still frustrating.  I'm familiar enough to know what I want, but not experienced enough to know how to achieve it.  Know what I mean? Here's what I did.

PHOTOGRAPHY

Background Image: Wilton Jumbo Confetti Sprinkles


I took this picture in my kitchen with my Canon EOS Rebel XSi EF-S 18-55IS SLR digital camera with Canon Speedlite 430EX II flash.  I placed a white poster board sheet on to my small, metal supply shelf, attaching one end at the bottom of one level and letting it curve down and rest on the lower level.  This gave me a background with a graduated blend (i.e. you can't see a crease as the back "wall" transitions to be the "floor").  I covered the back of the shelf with a white bed sheet to somehow increase the ambient light within the shelf.  A small desk lamp helped shine some light on my subjects.  This was a pretty ghetto light booth.

Here's the original picture and the camera data:




Pretty bad, huh?  Really dingy yellow background ... the sprinkles still look ok, though.  Here's the Adobe Photoshop magic steps I used to make the final product:
  • Filter > Sharpen > Sharpen
  • Image > Adjust > Brightness/Contrast
    • turned up Brightness
    • this makes the bottle and sprinkles a little more lively
  • Image > Adjust > Replace Color
    • selected the background dingy color with the eyedropper
    • turned the Lightness way up
    • this takes that dingy background and replaces most of it with pure white
  • Paintbrush tool
    • selected 300 px brush with soft edges
    • painted around the edges of the picture
    • this helps the photo borders blend into a pure white background on a web page or document
Photoshop is pretty darn expensive ... at home I'm still using a very old version that I got in my college days with a student discount.  I bet other photo editing software can do all this, but I'm not familiar with anything else but Photoshop (I use it at work too).

GRAPHIC ARTIST

Header Image: "Adventures in Cake Decorating"

More Photoshop magic:
  • made 3 text layers for "Adventures", "in", and "Cake Decorating" 
    • font is "Ballpark" ... like the hotdogs ...
    • picked a nice purple color
  • right-click each layer and set these Blending Properties
  • under Styles, select Stroke checkbox
    • then click on Stroke
    • select Size as 2 px
    • select Position as Inside
    • select Color as a slightly darker purple
  • save this file as a PSD in case you need to edit it later
  • save your web use file as a PNG if you want to maintain the alpha channel (i.e. transparency)
 WEB DESIGNER

I'm finding editing the template for Blogger MUCH easier than WordPress because it's so much simpler.  You can't really do too much in Blogger, but it makes hunting for code so much less excrutiating.  I'm using Mozilla Firefox as my internet browser and use the Web Developer add-on to help me identify CSS information on pages.  I use the ColorZilla add-on to help me identify colors on pages by using their eye dropper tool.
  • I set my sprinkles picture as the page background image
    • no repeating
    • positioned in the top left
  • I made my header-wrapper background color transparent, which lets you see my background image
  • I made the main post background color white
  • I made the side bar background color an extremely faint purple
  • I changed the colors of my links and visited links to purple
All that was made by modifying my Blogger template code.  I always refer to http://www.w3schools.com/css/ to help me remember how to code CSS.  I do some HTML every once in a while, but again, I refer to w3schools as my cheat sheet.

Well ... that's about all I'm going to do for another ... oh ... let's say 6 months!  Hope you like it!

5 comments:

  1. Thanks for the Photoshop tweak and trick. I like the result, it looks more stunning.

    ReplyDelete
  2. Hola!! A mi me gusto!! se ve que te tomaste tu tiempo, y claro que lo lograste. Felicidades. Espero algĂșn dia yo pueda intentarlo. Saludos!!

    ReplyDelete
  3. Thanks for sharing the details - it's inspired me to have a go....when I ever get some time to spare! :o)

    ReplyDelete
  4. Really love for your post, I was wondering about your blogger as I am not so skillful in blogger.;)
    Rex
    canon speedlite 430ex

    ReplyDelete
  5. I like this post. The article was very nice.. Very interesting.. Keep it up.

    ReplyDelete

As Seen On

As Seen On Capital Confectioners