Template Customization

How To Build a Baby Website with Photoshop in About an Hour

Posted on 13. Oct, 2009 by Dave in Tutorials

If you liked this post, please subscribe! You’ll be glad you did!

I’ve been meaning to get around to show this ever sense the birth of our lovely daughter Hailey back in 2007 – so now that we just had our latest addition to the family, little baby Austin born on Oct the 8th, I just had to write and share my joy with you. And what better way to do this than by putting together a really simple Photoshop tutorial on how to build a baby website with Photoshop. Admittedly, the in about and hour part of the title might be a bit inflammatory perhaps, but still quite easy.

check out the live demo.

Besides I want to do this for both the kids. After all, they’re just so cute, and I’m not just saying that only because they’re my children. Then of course I’ve never met a parent who didn’t say their child was beautiful, till you actually see these babies and then they are not so cute, they are crazy looking, like tiny little aliens – but you don’t say anything but smile, and that so cute …

So anyway, the first part of this tutorial is very simple, all you need is a camera or camera phone and Photoshop of course – also I’m not focusing too much on the design aspect of it really – so if you don’t feel all that confident in your design skills, don’t worry you’ll still be able to follow along…

The first thing I did here is find me nice pretty background – don’t worry you don’t have to be an artiest or anything, you can find theme related vectors like this at any number of royalty free image websites such as IstockPhoto.com, where I so happened to find mine for only buck.

Next, you’ll want to choose a favorite font or maybe draw some shapes using the rectangle or custom shape tools. And then, assuming you already took some photos of the baby, bring them into Photoshop each individually in its own layer – also your images are probably quite large so we’ll need to adjust this. With the “Image” layer selected, hit Command + T to bring up the Free Transform Tool. Then scale the picture to the desired size then hit enter to complete the transformation.

Next we’ll us one of my favorite options in Photoshop, what’s called a Clipping Mask. Clipping masks can be used for a variety of reasons. They are used to place an image inside text or to place an image inside a shape, such as what I’m about to do right here…

So using the custom shape tool, what you need to do first is, drawn your desired shape, place the shape bellow the image, and highlight the image layer. Right click anywhere inside the layer and select Create a clipping Mask. You can also mask more than one layer at a time by holding the shift or ctrl key while highlighting the layers.

I was absurdly and inexplicably tempted to randomly throw in a Buzz Lightyear in here, probably because I just went to see Toy Story, now in 3D, with my daughter, and partially because Buzz is cool, but mostly because I have really poor impulse control – so here is a random Buzz just so I can sleep at night.

Moving on.

Once you think you’ve got your design worked out, its time to use the Slice Tool – choose the Slice Tool from the Toolbox and drag out a slice around the image, once you’ve made your slice – choose the Slice Select Tool from the Toolbox, double click on the slice, give it a name, then lather, rinse, repeat…

In essence, the Slice Tool is used to divide a whole Photoshop image into smaller sections. This also has a part to play in making click-able images or “Web buttons,” especially when integrated as part of a complex layout. Any website that features a full-graphic layout was probably sliced-up from a whole design within Photoshop.

All that is left to do now is make the HTML page that will render the web page, and we can actually do that right here in Photoshop – starting from the main menu, hit (File > Save For Web & Devices) that will open the Save For Web & Devices dialog box.

The Save For Web & Devices dialog box has tons of optimization options which are beyond the scope of this tutorial. All we are really concern with here is the proper way to save our slices so that we end up with an actual web page and not just a bunch images.

How to save your slices to HTML – Photoshop will save each of the slices in this image as a separate GIF or JPEG, along with an HTML file containing a table to reassemble all the individual images as your navigation bar. Choose HTML and Images from the Save as Type menu to generate the HTML file. (If you choose Images, Photoshop will save only individual GIFs and JPEGs, which you could take into a site-building program for assembly there.) Leave the Slices menu set to its default-All Slices, choose a destination, and hit Save.

On your hard drive, there will now be an HTML file and an Images folder containing all your GIFs and JPEGs. Don’t separate the HTML file and the Images folder or the links to the images will break. Open the HTML file in a Web browser to see the results of your hard work. Each slice has become a separate image in a cell of an HTML table that holds all the images in place.

So that’s it, I hope you enjoy this tutorial. Should you wish to learn more about this or any one of our template customization services simply get in touch and tell us what you think.

check out the live demo
Did you find the tutorial on Photoshop useful?