Tutorials

Customize our premium WordPress themes and stand out from the crowd.

The Lensa Theme, Simple Layer Overlay in Photoshop

A few months ago, we released a free WordPress theme, Lensa, that we especially tailored for hardcore photographers. Lensa is quite a popular theme as it has been downloaded nearly 5,000 times when this blog post is written. A image layering trick that we implemented on Lensa was meant to add a dramatic feel on the photographs being showcased. That overlaying process is done automatically by the theme using a simple CSS technique, which won’t be covered in this post. This post, however, explains how the whole process can be simply done in a Photoshop environment. Hopefully you’re able to pull off this simple trick by the end of the tutorial. The one tool that you need is Adobe Photoshop, any version, preferably CS4.

1

This is a screen capture of the theme with 2x zoom. If you look closely, there are many dots overlaid on the picture in the background.

2

This dotted pattern, besides its function to add a dramatic feel, also manages to make lower quality photographs look sharper. To create such a pattern, start up your Adobe Photoshop and click File > New. Define the size, 2px in width and 2px in height, and set a transparent background.

3

Zoom it using Zoom Tool zoomtool to the maximum limit, so the canvas will look like this.

4

Draw a rectangle by using the Rectangular Marquee Tool rectmarquee with 1px in width and 1px in height then use the Paint Bucket Tool paintbuckettool to fill it black (#000000).

5

After filling the rectangle with black, don’t forget to deselect the area by using the Rectangular Marquee Tool rectmarquee and right-click on the black rectangle you just drew then click Deselect.

The next step is creating a pattern from this black rectangle. On the main navigation, click Edit > Define Pattern then give a name to your pattern and click OK.

6

7

After creating a pattern, you will need to add it onto a photograph. On the Photoshop main menu, click File > Open As Smart Object then choose one image file that will be overlaid by the pattern you’ve created.

8

9

The new smart object has been created. On the right navigation, click Layers. There is only one layer and right click on it. Choose Blending Option, tick the Pattern Overlay, then choose the pattern you have made before. Set the opacity to 30%. Click OK.

10

Now, using the Zoom Tool zoomtoolzoom the picture so you can see dotted overlay on the picture.

2

That’s it! Using this basic technique, you should be able to start creating another kind of pattern for your images in an Adobe Photoshop environment.

  • Andy

    Love that look. Also helps with people stealing your images! well done.

  • Ingemar Smith

    I love the look! Now if only I can get the theme to actually display my images as advertised and I will be golden! :D

    • David

      Did you have any luck? I can’t get images to display on homepage either.

      • http://about.me/wellfridhutagalung/ Wellfrid Hutagalung

        Hi David,

        Have you read the theme documentation? You can find out how to show the thumbnails on home page slider here http://colorlabsproject.com/documentation/lensa/ .

        • piyush

          Unfortunately me too unable to figure out how can I add slider images in home page. Your theme is awesome. If you can create a screencast video or you can post some screen shots then it will be a great help. Eagerly waiting for your reply.

          • Piyush

            P.S. I mean Andrie Pasca’s theme is awesome, never mind ;) I am creating a photography website and this theme seems to be bestest but I only need help with the home page slider images. Thanks in advance.

          • http://about.me/wellfridhutagalung/ Wellfrid Hutagalung

            Hi Piyush,

            To set the home page slider, you have to create some Photograph posts first. Then, choose which Photograph posts that you want to show up in the home page slider by marking them as featured post. From the Photograph list, you will see a star icon, click the icon to make it changed to featured post. A yellow star means the post already marked as featured post. (See the attachment file).

          • Graeme

            Hi Wellfrid, I have got the slider bit down, but what is the point of catagorizing images. I want to be able to have a gallery from photographs and only call images from a certain catagory to display, is that possible

          • http://about.me/wellfridhutagalung/ Wellfrid Hutagalung

            Hi Graeme, Lensa theme doesn’t support yet to create a gallery by category. We are planning to implement it for the next feature in the next update. Thanks!

          • Graeme

            awesome stuff, hope the update comes soon, love the theme

          • sublimo

            Have just been looking for hours on how to accomplish this as well. Guess I will have to wait then…

          • sublimo

            Another flaw to me is that if you click on a picture in a gallery, apparently there is no way to comment on that picture or to show a title or some explanation. There’s just the ‘love’ thingy.
            It’s a beautiful theme, but there are some flaws.

          • http://about.me/wellfridhutagalung/ Wellfrid Hutagalung

            Hi, thanks for the feedback. We are planning to add the comment feature on the gallery page. Hope it can be finished as soon as possible.

          • trevorcoultart

            Hi there Wellfrid. This is a feature I’d really appreciate. Multiple galleries with different selections of photos would be fantastic.

            Another possibility: muliple galleries based on individual Flickr *sets* rather than just one based on the entire photostream.

            At the moment the only way of doingmultiple galleries seems to be to have one sourced from Flickr, one from Picasa, one from Facebook etc. (I’d set up special accounts holding only the photos I want on displayed.)

          • Sunny

            }elseif(get_post_meta($post->ID,’meta_style_gallery’,true)==’photograph’){
            /*query_posts(array(‘post_type’ => ‘photograph’, ‘paged’ => $paged)); ORIGINAL */
            /* query_posts(array(‘post_type’ => ‘photograph’, ‘paged’ => $paged, ‘category_name’ => get_post_meta($post->ID,’photography_category’,true)));*/

          • ktepstad

            Hi Wellfrid. Great theme, I really love it. But I’m also missing the feature to sort galleries by category. Do you know when this feature will be available? Thanks.

          • zhaan612

            Yeah, done this. Doesn’t work. Just pulls one picture. The “theme documentation” is seriously lacking.

  • Alon Katziri

    Really nice theme, but still cant get the images in the home page, got them featured but nothing seem to work, gust got a black page (can see the header and footer but nothing else) if the front page is static or a endless thinking circule if the front page is the post page… will love some help with that.

  • trevorcoultart

    Hi there. Just started using the Lensa theme and pleased so far. One question: hopingto set up multiple ‘portfolio’ pages each showing a different selection of images. Can I get the portfolio ‘source’ to select only from a sub-section? Say, a particular set on Flickr rathar than my whole photostream, or something? Can’t find a way to do it yet.

    (Site so far: http://coultart.com )

    • Brittany

      @trevorcoultart:disqus
      Hey Trevor. I am needing help! I looked at your website and the galleries are working great. I’m decently new to the website building world. But I cannot, cannot get my galleries to work. My galleries either won’t show all the thumbnail images, or won’t go to a slideshow preview if an image is selected. If you could help me in anyway, I would sooo appreciate it! Thank you!

    • Roberto Salemi

      Hello!

      I saw your site and galleries are grouped by category.

      How did you solve it? How do I display only photos in a category?

      Thank you.

  • Pras

    I saw that a lot of you were unable to get the slider images on the front page to get working,like me.What worked for me is,I went through the process to create a a new photograph as per the theme documentation,but once I finished creating it,that is once i hit the publish button,You get a notification on top saying successfully posted or something similar in WordPress right? next to it is an option which says ‘view post’.Click that and it will take you to the photograph you just created,wait a while,it will display the title and content if any you used for the post and the photo itself in the background of the page.

    Once this is done,your slider images should start working, at least worked for me.

  • Anderson

    Hi. Awesome theme. Unfortunately i found a issue using Safari. Somethimes when i click in the link to one of the featured Photos the background image goes down and between it and the navbar there’s a “blackhole” in the background. Resizing the windows and the pic back to the correct place, but reloading the page, it reproduces the issue again. Best Regards

  • Gerard

    I love the Lensa Theme. He looks so good.
    But every time I activate it, everything is so slow.
    I hardly can make a new page.
    Are more users having the same problem?

    • ApplJax85

      mine is the SAME way. It *literally* takes more than 5-6 minutes to go from one page to the next in the admin panel. The website itself is fine, but the admin is absolutely horrific and I will dump the theme JUST because of that. It’s a horrid waste of time.

      • Hailey

        same problem with my new install

    • mantara

      I have the same problem, everthing is sooooooo slow when i activate the theme. any solution?

      • http://about.me/wellfridhutagalung/ Wellfrid Hutagalung

        Hi Mantara, it depends on how many thumbnails and how big is the thumbnails’ size that you’ve set as featured for the background sliders. More thumbnails you’ve set, the slower performance you’ll get.

  • Erica

    how do i get the landing page images that rotate with each other uploaded and where do i put the photographs?

  • dimi

    Hey guys, the WordPress update 3.6 just came out.
    I installed it. and now my theme doesn’t work..
    Help ?

  • Matt Inden

    The dots are kind of cool, but for my site they get in the way of what our work is about: namely ultra clear images and high resolution. Please let me know where the css is for this so I can modify/remove it.

    • SleepHug

      Also interested in the answer to this.

      • Simon2

        Hey, that did not work with mine. Has anybody another solution for that problem?

  • Kuzyo Yaroslav

    Theme is awsome. I have issue with slider – I achived that main page slider works fine, but after I go on another page I want there another background, but instead there is photo from slider. How to setup diffreent background on pages except home page?

  • KChristoph

    Greetings full of sun from Hannover, Germany.
    The last month I’ve used lensa.
    I like it.
    The last days I tested it with wordpress 3.6

    It’s not working.
    Is an update on the way ?
    Thanks ! – Danke !

    • KChristoph

      I tried another server.
      Installation now o.k. !

      Thanks !

  • Hans Nolte

    Hey there, Im having issues with the slideshow in the latest version Safari + WordPress 3.6. On Chrome the main slideshow shows ok but in Safari it’s broken.

  • Blou

    The design is nice but is there a way to display different “Photograph” page categories as a gallery? Its rather frustrating to have all my photos lumped together under one category

  • Fiaz Ahmad

    Thanks Colorlab for providing us great theme for fee really appreciated……the pattern you make is already show in my theme slide images i need to remove it how can i do that…give me hint i’ll pack up surely…..for that i need to amend css file or any other file…..

  • Drasga

    Hi,

    Perfect theme. Unfortunately I cant figure out how slider photographs may lead to another site (fi. gallery) instead of photograph page itself.

    may you help me please?

Contact Us