Lilac Creative

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.

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.

Making 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

Unsharp 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.

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.

With 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.

Next 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.

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:

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.

Web design isn't just colorful graphics and fun mouse-over effects; it requires a lot of forethought and strategic planning. I decided to write about the process involved in my recent site redesign, to give an idea of the way I work, as well as some useful tips to consider when planning for your own website design or redesign. In this post, I take a look at the initial planning I did before I even opened up my graphics programs or wrote that first line of code for the new site.

Is My Website Working for Me?

That was the first question I asked myself when I started to think about redesigning Lilac Creative, and it's one that all website owners should be asking themselves on a regular basis: Is your website actively working to aid your business? In today's business climate not having a website can be detrimental to a company's credibility, but having a poorly-designed or out-of-date website can be just as bad--if not worse--than having no website at all. Website owners should reevaluate their website on a regular basis to make sure it consistently meets the needs of the business or company it represents. A healthy business grows and changes to stay competitive and keep up with the changing needs of clients. If you don't update your website to meet the needs of your business' growth, your website can become a liability instead of an asset.

So, how do you determine whether or not your website is working for you? You need to have a clear understanding of your business' growth direction, and examine your website to make sure it is following that direction. It could be just a matter of simply changing colors on the site to match updated branding, or updating the site's copy to reflect a new mission statement. Or you might find that the new growth of your business requires your website to take on a different roll altogether. Perhaps your site started out as a basic informational site but now that your product has taken off, you'd like to be able to sell directly from your site. Evaluate your business' needs and then examine your website to see if it is efficiently meeting those needs. Consider new possibilities for your site that will meet more of your business' needs. It's your website; put it to work for you.

Examining the Roll My Website Plays

Unlike businesses that have a physical location where their storefront or office is the first place a client interacts with their business and their website is an auxiliary marketing/information tool, almost 100% of my business comes through my website, basically making my website the face of my entire business. When I first started freelancing, I knew the presentation of my portfolio needed to be a priority. This was most likely where people would go first, to see exactly the kind of work I do, and to decide whether or not my style and quality would fit their needs. With that in mind, my original site design gave careful consideration to the portfolio. Another important area of the site was the contact page. I needed a contact form that functioned well and gathered the right information to help me evaluate projects submitted through my website in order to give an accurate quote. Focusing on these things in my first design was a good start and the special attention to these areas paid off. My website brought projects in, and I saw my business grow. But the growth of my business also revealed to me areas of my site that were lacking, and showed me new opportunities that my old website wasn't well-suited to address.

The Evolving Needs of My Business

When I first started out, project inquiries trickled in slowly. I would do one or two quick, small projects in a month, and my freelance income was little more than hobby money. But the more sites I did, the more inquiries I started to receive. This also resulted in bigger projects, and more of them, but two problems started to arise. One, I was spending hours each day answering inquiries, which cut into my billable work hours. And two, I found that many of the inquiries I was receiving were either not prepared for my prices or not serious about their project, so I was wasting my time answering them but had no way of telling the serious inquiries from the non-serious. I also found that on top of inquiries, I was receiving many of the same questions from potential clients about my work process, what was included in my services, etc., making that much more correspondence work for me. It became clear to me that my website needed to provide more information to potential clients, and that by posting a basic pricing structure I could give people looking to hire me a pricing point of reference so they could know ahead of time whether or not my work would fit their budget. 

As my business grew, I also started looking at new product/services I could offer, and at ways to better serve my clients. Some of the things I brainstormed were possibly opening up my own blog theme shop, and providing clients with a private support forum. At the time of my redesign, I was not prepared to implement these ideas, but I wanted my new site to be easily expanded to include these things if/when I do decide to go ahead with them. I felt that my old site's CMS was not the best option for what I had in mind.

Lastly, I felt that the design of my old site no longer reflected the direction my business was headed in. It was very bright and colorful, and geared specifically towards women bloggers. I was starting to work more and more with small business owners--both men and women--and felt that my old site design wasn't reaching my full target audience.

The Goals for My Redesign

After examining all of that, I came up with a list of concrete goals that I wanted my redesign to accomplish:

• A more professional site design that follows the new direction my business is taking (focusing less on vanity blogs, and more on small business solutions)
• Provide more information to educate clients on what makes a good website, exactly what I do and the value behind it, as well as my design/development process
• Include basic pricing structures to give people an idea of what to expect in a quote, thereby eliminating non-serious inquiries
• Encourage all inquiries to come through my inquiry form, so that I have the information I need in order to give a quote
• Separate logo design portfolio from web design portfolio in order to eliminate confusion about what is and isn't my work, and to make each easier to browse
• Be built on a more flexible and feature-rich CMS that would allow for easy site expansion, membership management and possible eCommerce; to accommodate directions I can see my business going in in the future

With these specific features in mind, I then started to think about the design aspect of my new site. And I'll blog more about that in part two!

Share Your Experience

If you've been involved in the process of rethinking a website, you know the work involved. What new ways were you able to find to make your site work for you? I'd love to hear your ideas and experiences!

Update:

Here's a great article to read if you're considering a redesign yourself: Preparing and Planning for a Redesign by the folks over at Webdesigner Depot

Search Engine Optimization (SEO) is on every website owner’s mind. We all want our sites to be noticed and ranked (highly, we hope) by the search engines so that our target audience can find us easily on the web. That is, after all, the whole point of having a website! If you’ve done any research into SEO, it seems pretty straight forward. Use well-structured metadata, page titles, and you're golden, right? Well, that's a good start, but here's a few more things you can do.

1. Don't Overdo Your Key Words

Key words are, well, key. You want to make sure your metadata includes a list of keywords that your audience is likely to use to find you (or sites like yours), but don’t inflate the list. Flooding your metadata with keywords, or repeating keywords in multiple areas of your site such as your footer, even repeating key words unnecessarily in your post titles can all have a negative effect on the way search engines view your site. Hiding key word areas on your site by making the text the same color as the background is also a big no-no. It may not be visible to the human eye, but search bots aren’t fooled, and they don’t like sneaky tricks like that! Keep your key word usage reasonable, and let your content do the rest of the work!

2. Post Fresh, Original Content

Wanna really grab the attention of all the search engines out there? Fresh, original content posted on a regular basis is the best way to climb in the rankings. If you have a blog, try to keep a regular posting schedule. When you post to your blog, or update your site content, keep the content original. Use your own words. Your readers will sense your genuineness and come back for more, and search engines will recognize unique content and rank your site accordingly. It’s a win win!

3. No Filler

Some content can actually hinder your site in search engine standings. Lengthy lists of links (like bookmarks or favorites), content copied from other websites (even if you gave proper credit and linkbacks), or web copy that is shared within communities and used by many members on their individual websites can appear as filler to search engines’ robots (not a good thing). If you have long lists of affiliate or favorites links in your sidebar, consider trimming the lists down. If you can’t bear to part with a single link on your list, just remove the list from your sidebar (which shows up dynamically on every page of your site), and move it to one static “Links” page on your site.

4. Make Use of SEO Tools

Most search engines have information about how their engine ranks sites. Read up and make sure you’re keeping within their guidelines, and you’ll probably even learn new things you can do to increase your site’s search engine love! Google offers Webmaster Tools, a free service that can help you get a handle on how Google’s search bots crawl your site. If you’ve got a self-hosted WordPress blog, there are TONS of great SEO plugins that can automate a lot of SEO tasks for you. Type “webmaster info” into a Google search, and you’ll turn up lots of great info.

Helpful SEO Links

Here are some resources that will help you get a handle on SEO for your site.

Google Webmasters Central 
Google Webmaster Guidlines
Ask.com’s Info for Webmasters 
WordPress All-in-One SEO Plugin Pack
WordPress Google XML Sitemaps Generator Plugin 

Have SEO tips to add? Leave a comment below and share what you've learned!

I’ve been on Twitter for a while now, and I love the idea of it: say your piece in 160 characters or less.  I often want to blog, but feel like I can’t come up with enough material for an entire blog piece, and Twitter has been the perfect solution for me.  I can Tweet the random thought that just popped into my head, or a brief status update, and not feel like I need to struggle with more content to go along with it.

Using Twitter to Socialize

Social networking definitely isn’t new.  Chances are, you’re already on Facebook, MySpace, LinkedIn, Flickr, and/or any number of other social networking sites and services.  Twitter is just another way to socialize on the web.  Grab your own Twitter account, and you can “Follow” all your friends–catch their latest updates, and let them know what you’re up to as well.  You can even Tweet on the go: Twitter allows you to tweet from your cell phone.

Using Twitter to Network

Just type a few key words into Twitter’s search, and you’ll pull up all the most recent tweets on that subject.  I’ve found this really useful for hooking up with other graphic and web designers.  Now I have a network of others in my profession that I can exchange ideas with.  Frequently, my contacts will post links to blog articles with helpful tips and tricks of the trade.  It helps me keep up with the latest design trends and best practices.

Using Twitter to with Your Business

Just like your customers follow your blog, they can also follow you on Twitter.  You can encourage this by feeding your Twitter updates into your blog and including a “Follow me on Twitter” link.  The key to using Twitter to promote your business is to keep it real.  No one wants to follow someone whose Tweets are just ads 24/7.  People want to know who you are and what you’re about.  Let that show in your Tweets.  If you’re a photographer, Tweet about how much fun that last newborn shoot you did was.  Tweet about a helpful new photography trick you just learned.  Tweet about the new blog entry you just posted that has super cute pictures from your latest senior session.  Be genuine.  This lets your customers/clients relate to you as a person, and helps develop trust in your business.

And with that, I’ll say that I just added my own Tweets to my site!  You can check out my latest updates down in my footer, and even find a link to follow me on Twitter.  I’d love to network with you!  But I’ll just warn you now: I tweet about food.  A lot.