Lilac Creative


New Little Man


If you've contacted me recently, you've gotten my auto-responder saying I'm on maternity leave. We welcomed our new little guy, Tripp, into the world on September 3rd. He was a bit of a surprise, but we are so thrilled to be parents again, and my 7-year-old daughter is a proud (and super helpful) big sister! So far I'm recovering well and Tripp is a mellow little dude, so hopefully that will make it easy for me to slide back into work in another few weeks!

I plan on starting back slowly in early October--I'll be taking on small projects (platform updates, quick fixes, tweaks to existing client sites, etc.), and then working up to full-time, taking on new projects by mid-October. Thanks so much for your patience, and all the well wishes!

Baby Tripp

Jack and Ruby Photography Featured in Blog Gallery


Last month I completed a new photoblog for clients Kara Wieler and Becky Radtke of Jack and Ruby Photography. They wanted something clean, simple and elegant to show off their gorgeous engagement and wedding photography. I worked with their existing logo that features a cute and quirky guy and girl that represent Jack and Ruby, the “every” couple. The design I came up with features soft colors drawn from their branding, clean lines, a beautiful webfont script for post titles, and ample white space to give their beautiful photos plenty of breathing space.

Yesterday, I was thrilled to see their blog show up on Blog Design Heroes, a gallery of exemplary blog designs.

Jack and Ruby on Blog Design Heroes

Optimizing Photos for Your Blog


If you’ve ever posted a photo to your blog and wondered why it doesn’t look as good on your blog as it does in Photoshop, this post is for you! Here are a few tips for making your photos look good online!

Print quality images have a much higher resolution than is needed for viewing on a screen. It’s important to resize your image for web viewing. There are lots of automatic image resizers out there—some blogging platforms will automatically resize images as you upload them—but by doing it yourself in Photoshop, you can control the quality of the image as you resize it, so your photos look as good sized for web as they do at full resolution.

Resizing the Image

The first step is to convert the image from print resolution to web resolution, and then make sure that the dimensions will fit your blog.

Resizing Photos - Original Image
Open your image in Photoshop, and then go to Image > Image Resize. You’ll see a dialogue box like the one above. If you’ve optimized your images for print, your image should be around 300 pixels per inch, which puts the dimensions around 3888 pixels wide and 2592 pixels tall.

Resizing Photos - Resize Image SettingsMaking sure the “Resample Image” option is checked, change the resolution to 72 pixels/inch. You’ll see the pixel dimensions automatically decrease to around 900 pixels by 600 pixels. Next change the pixel width to fit within the content area of your blog (if you’re not sure how wide your content area is, check with your blog designer and they should be able to tell you). Here I’m setting the width to 500 pixels, which will fit well within my blog posting area.

If your photo is vertically-oriented, you don’t necessarily want the width to be as wide as your posting area or the viewer may be forced to scroll down in order to see the entire photo. For vertically-oriented photos a good rule of thumb is to make the height of the photo the same as the width of your blog. It will make the width of the photo narrower than your blog post area, but the height will fit on the screen without needing to scroll.

Sharpening the Image

Sometimes resizing an image can soften details that really make the photo. Here are a couple ways to sharpen your photo and bring back those fine details.

Unsharp Mask

Resizing Images - Unsharp Mask SettingsUnsharp Mask is a great tool for sharpening images, whether they’re print or web resolution. With your web-sized image open in Photoshop, go to Filters > Sharpen > Unsharp Mask. Set the Amount to around 42% and the Radius to around 1.5 pixels. Play with the Amount and Radius to see how it affects the sharpness of your photo.

Resizing Images - Unsharp Mask Sample

High Pass
High Pass is another way to sharpen details in your photo, and it can also give a little bit of color “pop” to a color photo.

Resizing Images - High Pass Step 1With your web-sized image open in Photoshop, create a duplicate of the image on another layer using CTRL/CMND + j or by right clicking on your background layer in the layers palette and selecting “Duplicate Layer”. Then set the top layer’s blend mode to Hard Light.

Resizing Images - High Pass Step 2Next go to Filters > Other > High Pass. Set the Radius to around 1.2 pixels. You’ll notice that the preview window of the High Pass dialogue shows a gray field with embossed-looking lines around the details of your photo. For this reason, it’s important to have the duplicate layer’s blend mode set to Hard Light so you can see the end result of the filter in your image in the background as you’re adjusting the settings.

Resizing Images - High Pass Sample

Saving the Image for Web

Once you’ve sharpened your image, you’re ready to save it for web. Photoshop has a special Save For Web option that allows you to optimize your final image for the web.

With your web-sized image open in Photoshop, go to File > Save for Web, and the following dialogue box will pop up:
Resizing Images - Save for Web Settings
In box 1 in the above figure, make sure the image type is set to JPEG. Below that are the image quality selectors. Set the image quality to “Very High,” then look at box 2. This will tell you how large your file size will be at that quality, and how long it will take to load the image at various internet speeds. If the file size is above 200K, I recommend lowering the image quality until it is. Keeping your image file sizes below 200K will ensure that images load quickly for your blog readers, and you should be able to get good image quality within the 200K file size.

A Few Last Notes on Images on the Web

  • Not all colors are viewable on a screen. For that reason, web images may appear duller in color when you post them to your blog. To compensate, consider using a Vibrance mask on your image and increasing the vibrance and/or saturation just a touch (but not too much!).
  • Computer screens need to be calibrated for correct color display. If you are a photographer, you probably have a color calibration tool that you use on a regular basis to make sure that the colors you see on screen are as close to print colors as you can get. However, your average blog reader may not have his or her screen calibrated for color, and may see your images slightly differently than you do on your calibrated screen.

Designing Your Own WordPress Themes


I get a lot of emails asking how I learned to design and build WordPress themes from scratch, and if I have any tips for those interested in building their own themes, so I thought I’d write a post about it for anyone else who might like to know.

My History with WordPress

I kind of fell into web design as a profession by accident. While I’ve always been pretty tech- and computer-savvy, I was never particularly interested in programming or computer science, so web design was never really on my radar. A few years ago I purchased my own domain and hosting (for a site that no longer exists), and installed my first WordPress blog. I was so excited to have my very own place on the web, and I wanted to take it a step further—I wanted to make it look like my place.

I knew nothing about web design (other than the visual stuff—I was very well versed in Photoshop), had a very basic knowledge of HTML, and had never even heard of CSS when I first started. But I figured out that I could take a theme that I liked the general layout of, open up the graphics in the theme’s images folder and create my own graphics over top of them, save them with the same names and suddenly have a theme with my own design. Around the same time, a friend of mine explained the general idea of CSS to me, which piqued my interested and made me want to learn more. I picked up a book that explained HTML and CSS and how to use them together, and that set me on the road to building my own WordPress themes from scratch.

Tips for Those Interested in Building Their Own Themes

If you have a self-hosted WordPress blog that you want to learn to customize yourself, or if you’re interested in getting into WordPress theme creation in general, here are a few things that really helped me get started:

  1. In order to be truly creative and free in your theme-building, you really need a solid grasp of current HTML and CSS standards. Slicing a layout in Photoshop and saving it as images and HTML, or using the WYSIWYG side of Dreamweaver will NOT produce web-standard HTML. Take the time to learn how to correctly hand-write your own HTML and CSS from the ground up—you will be so glad you did!
  2. Set up a local server environment on your computer for offline WordPress development. XAMPP is the one I use. It’s easy to setup and runs everything most CMSs, including WordPress, need.
  3. Peruse’s Theme Library. Don’t just look at the themes for their graphics and visual appeal; look for interesting layouts, or functions. If you see something that’s new to you, download the theme and plug it into your local dev environment so you can dig through the code and learn how it works.
  4. Google “how to create your own WordPress theme”. There are dozens of great tutorials out there that will take you through the basics of a WordPress theme. If you have a hard time understanding one tutorial, try another one. Different people take different approaches—find one that makes sense to you.
  5. Work from a framework. What’s a framework? It’s like a theme template, a super simple (plain, even) theme that has all the basic necessities of a theme with a basically blank stylesheet just ready for your new design. Create your own framework or grab one of the many already-existing frameworks out there. No need to reinvent the wheel every time you create a new theme. Working from a framework will save you a ton of time!

Getting Advanced with WordPress

The list above are things that are helpful if you’re just getting started and you want to focus on customizing the way WordPress looks. But the fun of WordPress doesn’t end there. If you’ve got a little PHP under your belt, WordPress offers a ton of functionality beyond the standard template tags. Explore WordPress’ Codex if you’re wanting to dig deeper and find creative ways to use WordPress. Also be sure to check out the vast Plugin Library to add even more functionality to your themes. If you’re creating themes for sale, look into adding theme options and an admin panel to your theme.

Some Great HTML, CSS and WordPress Resources

Lilac Creative Featured on HTML5 Gallery


Things have been so busy around here for the past few months, that it had been a while since I checked my site stats (which I usually monitor about once a week). When I checked them recently I noticed a huge spike in site traffic about a month back. I checked to see where it had come from I was surprised and honored to find that Lilac Creative had been featured on HTML5 Gallery.

Lilac Creative on HTML5 Gallery

HTML5 Gallery is a site that showcases sites built on HTML5. Not only is it a great resource for creatively designed sites, but it's also a great place to find practical usage of HTML5. I confess to referencing it many times during my HTML5 redesign of Lilac Creative. Each site featured in the Gallery is examined, and the Gallery "curators" make notes of each site's correct and creative use of HTML5, as well as areas where various HTML5 elements could have been implemented in a more effective way. HTML5 is a great contributor to the growth and development of HTML5, and I'm excited to have my site be a part of it.

Next Page