Photo credit Grafika Studio

The Internet is becoming more aesthetic every day. Beautiful and well-styled images are your best shot to create an emotional connection with your audience through visual content, and make people fall in love with what you do and how you do it.

That's why we spend so much time sharing photos of our day-to-day work in social media, behind the scenes shots, sneak peeks of new products and a lot more, especially on Instagram or our blogs. Getting these shots right can make your business stand out.

I'm not a professional photographer, so all I've got to get good shots is my iPhone. But as much as I tried, I never got a shot with the perfect light exposure inside my home. Lucky, I got a not-so secret weapon to fix all my lighting issues: Photoshop*

Correcting light and colour with Photoshop is very easy. You just need to know a few quick tips to make the right image corrections. Today, I'm sharing my most common tips in this 3-step tutorial so that you can take your photos from 'meeeeh' to 'yay!' in just 10 minutes.

* NOTE: If you don't want to buy the software (AUD $11.99/mo) you can download the free app for small devices. This tutorial can only be done from the full version of Photoshop, tough.

Ok, so let's get started. I got this photo today by placing the fruit jelly box on top of a white cardboard and on a table next to the window. As you can see the light here is still 'meeehh'. Let's fix that.

Original photo from iPhone

Step 1 | Light correction

I open my photo in Photoshop and go to Image > Adjustment > Levels. With this tool I can make whites look whiter (rather than ugly greys) and blacks blacker. You usually know when whites and blacks are right by placing the controls just under the beginning of the curve in both sides.

Play with Levels to intensify whites and blacks

You can also use the Dodge and Burn tools, in the Tools window (left side of the screen) to correct the light in specific points of the image.

STEP 2 | Lighting Mask

With just these quick adjustments the light is now looking a lot better and colours start to brighten up. However the image didn't have a uniform light (I just had my window as a light source). As a consequence of this, the light is too bright from one of the corners, making some jellies look too pale.

After correcting the lighting, there is part of the image that is now overexposed

Solution: duplicate the image layer in Photoshop and apply a mask (see image below). Then go to the Gradient Tool in the Tools window (left side of the screen) and select the black and white gradient. Apply the gradient to the layer mask in the direction of the natural light, in this case from the top left corner to the right bottom side.

By doing this you just made half of the image transparent (hide the layers below to see the transparency). Now you can adjust separately the light in this over-exposed corner by playing again with the levels, as you did in Step 1.

Create a layer mask to correct light in just one part of the image

Step 3 | Bending Layers

Finally, from your Layers tab, select your lighting mask layer and click on the bending mode drop-down menu (just on top of your layer list and next to the layer Opacity). It should be set to Normal. Change to Soft Light.

And voila! you just got a perfect lighting for your image!

Light is brighter and colours are more vibrant

---

Client: Collected Interiors
Project: Art Direction, Photo Editing, UI/UX, Web Design and Development
Date: Launched in September, 2014

View fullsize

Collected Interiors website designed by Grafika Studio

I am a big fan of Perth interior designers Collected Interiors, so when I was asked to re-designed their website I immediately felt excited about this project.

The briefing was to create a sleek and modern new website, to display bigger images and to incorporate some interactive tools.

I created a custom-made design – no templates were used here – carefully thought to let the images shine. Full screen images in almost every page allow the visitor to get a taste of the designers' talent before even visiting their portfolio.

The design is simple and clean so that visitors can enjoy the beautiful photographs with no distractions. Condense typography, combined with serif fonts for a classy elegant touch, and a lot of white empty space achieve a modern and professional look & feel.

 

INSIDE A RESPONSIVE DESIGN

One of the major improvements made on this website was the responsive layout. The full-screen images made a fluid design necessary, so that they could automatically adjust to every screen size without being deformed.

The portfolio pages have a responsive slider with an advanced touch / swipe support built-in to facilitate the navigation from image to image on small devices.

 

THE USER EXPERIENCE

Every image was edited to achieve the perfect lighting in each interior space, and carefully selected so that the internal pages could flow from one to the other keeping a consistent feel across the entire website.

Every image gives a sense of tranquility to make the visitor want to stay longer on the site. Link effects were also eased to reinforce that sense of calm aimed to retain visitors and let them visit the site with no rush.

THE RESULTS

After the new website was launched Collected Interiors experienced an overwhelming success in social media, getting more than 300 Instagram followers in less than 24hrs, or more than 100 Behance followers in less than 24hrs, and many other successful stories. A SEO friendly website along with a link building strategy put this site at the top of the search engine rankings, busting visits and customer enquires.

“Working together was easy and fun. Rosa is an intuitive and highly professional designer, who always figured out how to translate our ideas into a digital experience. ”

— Lisa Ewart, Creative Director of Collected Interiors -

Five simple tips for designer websites

1. Invest in high quality images

Images are the most important piece of marketing for any designer, not just for web design, but also for press, link building strategies, social media marketing and much more. Style your photographs, hire a professional photographer with the right equipment – and experience – to photograph interiors, and edit every image to correct small imperfections and lighting.

2. Keep a simple colour palette

A minimalistic colour palette will achieve an elegant, sleek and modern look in your website. A clean look & feel will let your images speak about your work and the way in which you do business with no distractions.

3. Learn to love the white space

Let the space breathe. Against what many people think, empty space is not a lack of design, it's actually an important design element, essential to achieve a polished and professional look in any website.

4. Apply a visual storytelling to your website

The entire website must tell the visitor your story and every page must conceived as a chapter of that story. The storyline must flow through an intuitive navigation, powerful images and a compelling message. Every aspect of the website design should be carefully and consciously selected to help to support the thread of the story.

5. Create an emotional connection

Design is an emotional business and your prospects will only become clients if they connect emotionally with your brand. The challenge is to create that emotional connection in a few minute visit to your website.

Call to actions will get you newsletter subscribers, blog readers, social media followers, etc, that will stay connected to your business after visiting your website. Use all these platforms to continue working on that emotional connection with them. Many visitors won't get in touch in their first visit but will be ready to work with you after a few interactions with your brand.

---

Are you interested in working with me for the design of your brand and website? Visit my Branding and Web Design pages for more information on my process, design package and pricing, and my Contact page to get in touch!