How to Design a Landing Page in Photoshop – Kickstarter Product


Hey, what is up guys my name is Cosmin
and in today’s video I’ll be creating a landing page design inside Photoshop for
a company that’s about to launch a new product on Kickstarter called Xook.
With this landing page I’ll try to answer three main questions for every
visitor that lands on it, which are: What is this product, why should I care, and
who used it? Now let’s move into Photoshop and get started.
I’ll start by creating a new document but I’ll also be using this 16 column
layout I got online you will find the link in the description of the video and
just make sure that the width of this new document is 1200 pixels and that you
have enough space and add the height of at least 5,000 pixels, hit okay, the next step
is to move the 16 columns in the new document just by clicking and dragging
the whole group to the other document and hit Command+T to transform the whole
group and while I’m holding the Alt key I’m dragging it to the bottom. Let’s
unlock and rename the bottom layer and start adding some guides on the sides and
in the center. Once I did that I’ll go to Image – Canvas size and set the way to
1920 pixels. I’ll fill in the background with white by selecting a layer and
holding down Command and Backspace. I’ll just zoom in, let me zoom in and start
adding my first elements. To get started I’ll hide the 16 columns
guides and create a new group and name it header and place the first layer that’s
great and you know it, what I usually do at this point is create some shapes that
will help me keep the spacing between my elements consistent throughout the page,
let’s click anywhere and on the canvas and you can set the size of the
rectangle. I’m interested in having a 60 pixel height and place it at the top. I’m using unsplash.com to get
cool-looking images, let’s right-click on the image layer and select create
clipping mask, these images are royalty free and can be
used in commercial projects, so as I placed it inside the shape I’ll hold
down Command and click the shape layer to create a quick selection and I’ll add
an adjustment layer on top of it and create a gradient map. My goal with this
technique is to get a low contrasting image that blends in with the whole
style of the page and doesn’t take away too much attention from the copy and
button. I’ll play around with a couple of shades of blue until I find something
I’m happy with and I like for the top blue element to stand out more, so let’s
change it to the color applied on the button. I want to add the new shape right
next to it but first I’ll have to find the initial one let’s make it visible
and move it on top of everything, I’ll want to duplicate it and after we hide the
initial shape I’ll rename the existing one to shape-light. Let’s hit Command+T, right-click on the
shape and select flip horizontal and I’ll place is somewhere around here and also
make it bigger by holding down Shift and drag in the bottom left corner. To apply
a specific color to a shape layer double-click on its thumbnail and let’s
add a very light blue color to it, hit OK and I’ll want to save this color so
let’s sample it using the eyedropper tool and inside the swatches panel hit
the new icon and drag it behind the other elements, I’m not 100% on its position
but for now I’ll probably leave it as it is. I can move to the button next, select the
shape to make any kind of changes let’s zoom in a bit, you can double click on
the layer and I like it to give the button some dimensions so I’ll add some
styling I’ll first add a white outer glow, I want to make sure that the
blending mode is set to normal and then add color drop shadow, remember I want
this button to stand out as much as possible being then the main goal of
this page is to have its visitors click it. Very similar to the outer glow just
set the blending mode to normal, adjust its distance and size and keep in
mind I’m just eyeballing these values to whatever looks good to me, you might not
agree that this looks good but hey I’m doing my best, and let’s lower the
opacity just a bit and move to the other shadow panel and select a smaller size, maybe have something like 2 pixels
and increases its opacity, you can barely notice it anyway.
I’ll zoom out and remove the guides for a moment so I can take a look at the
header, you can go to View and deselect extras, I immediately noticed that the
shape was on top of the headline so let’s move it behind it. In this section I like to have a video
button so I’ll create a circle and add the same styling as the top button, let’s
right click and paste the layer style, I want to have a consistent look
throughout the page so for the white shape that has a supporting text
content I’ll try and add the slant on the left hand side, I’ll use the pen tool
to quickly have the same angle we’re almost the same but you can’t really tell
and move it to the side, using the direct selection tool I’ll select the white
shape, add some route corners, three pixels should be fine and holding down
the Shift key I’ll select the bottom left anchors and drag them to the right,
let’s remove the shape since we won’t need it anymore and do some small
adjustments with positioning of these elements.
I like this layout more than just having a video thumbnail, looks more dynamic, but
we still need the play icon. Let’s zoom in and use the rectangle tool,
click and drag while holding down Alt and Shift, use Command+T to transform and
let’s rotate it to 45 degrees I’ll need to remove the left anchor, so once I
rotate it use the pen tool and just click on any anchor to remove it and do
some small adjustments to make sure that the icon fits inside the circle. Double-click on the thumbnail of the
shape layer and just sample the white color in the background, hit Command+T
and I’ll place it in the middle of the circle. All of the icons used on this page were
downloaded from Envato elements, they have a subscription where you can
download as many graphical assets as you’d like and they have a lot so it’s
more than worth it, to place these icons I simply copy and paste them from
Illustrator to Photoshop. Initially I had a very rough idea of how I’d like these
section to look but I’ll try something a bit different and place these icons on
the side and adjust the white box to make it a little smaller in width, I’ll
need to align the headline and paragraph inside the shape and now I can make
changes to the white shape. I think I’ll go with this layout even
though it’s not going to be fun to apply the same spacing to the rest of the
boxes, now I’m struggling a bit to select the padlock icon as I’d like to apply a
color overlay, then maybe use the blue I have saved up in my color swatches panel
and do something similar to the fingerprint icon. Let’s select it, I guess I’ll have the
same color as the background and maybe play around with the blending mode,
select multiply, honestly that doesn’t look good, I mean it doesn’t look better
than before so maybe just go back to the color overlay panel and just find the
slightly darker shade. For the testimonial section I didn’t do
anything special, I’ve used kind of the same techniques as on the header image
and now I’m ready to move on the onto the final section, we’re still using
shapes to define the spacing between elements, hope you will incorporate this
technique in your future projects, now I’m not too happy with this call to action
but being the first design iteration I guess it’s okay, we can always change it
later, right now I’m focused more on creating a clean layout that will help
get the right message across. I just wanted to make sure to have a button at
the bottom to make sure that the visitors that get here have a way to act.
I’m also thinking about including some sharing links since this is a page that
will be used to test the interests of the visitors and maybe gain some
momentum by having people share it on social media. I don’t recommend it on
landing pages, usually I don’t add any kind of external links other than the
main goal just to make sure again that the visitor is the land on this page
don’t get distracted, but for this one I guess it made more sense. This will be the final look of the
landing page, hope you enjoyed the process and if you did don’t forget to
hit the like button and subscribe for more, now if you have any questions just
leave them in the comment section below and I’d be more than happy to help, until
next time take care guys, bye!

26 Comments

  1. Dr.Web April 15, 2018 at 7:43 pm

    It will be good, if you'll make a complete course of how to use Photoshop for web design each and every tool that used in photoshop for web design.

  2. Simple Designer April 15, 2018 at 11:46 pm

    damn man , you really nailed it, keep it up, keep it lit <3

  3. Marouane Beast April 20, 2018 at 4:26 pm

    WOWWWWWWWWWWWWWWWWWWWWWWWW..
    i Love your work man Pleas make more video like this.. i have already started designing Landing page and i enrolled in your courses on Udemy.. now i need to practice more to master web design in Photoshop..
    i Beg you pleas do more Videos like this one
    and Thaaaank Youuuuuuu

  4. AHT JOHN April 21, 2018 at 3:40 pm

    thanks a lot buddy for uploading like this cool tutorial ! & i already enrolled your course in udemy. And please always keep source file in your video description ! cause with out source file your video will useless! & i waiting your new tutorial like this! please don't make a long pause cause i'm become your big fan!

  5. Бастин Џибер April 23, 2018 at 12:15 am

    Looking great! I like it…subbed

  6. SK3RTh RPG April 25, 2018 at 11:43 am

    Dupa acent e roman

  7. xJay June 9, 2018 at 12:27 pm

    Is that ninja a plumber?

  8. Cosmin Serban July 25, 2018 at 6:38 am

    Just in case you'd like to learn how to design a landing page in real-time, check out my course: https://www.udemy.com/design-beautiful-landing-pages-that-generate-quality-leads/?couponCode=YOUTUBE-DISCOUNT-18

  9. Creative Design August 1, 2018 at 9:32 am

    great video, i just subbed to your chanel, big like

  10. Wejdan Alaradi November 8, 2018 at 5:37 am

    thank you very much cosmin

  11. Nasir Uddin December 3, 2018 at 9:18 am

    Looks awesome man.

  12. Dewi Puspitasari January 11, 2019 at 8:13 am

    Awesome and useful tutorial, thank you!
    Just wondering, there's a part in the tutorial where you crop the bedroom picture with selection tool, mine can't do that. Is that Photoshop CC only feature? I'm still using CS6. Old komputer.
    How to do that?

  13. Luiz Augusto Lescura January 14, 2019 at 2:03 pm

    what format do I save to use in wordpress?

  14. neil kumar February 5, 2019 at 4:56 pm

    Your voice is so peaceful!

  15. Baker monther March 7, 2019 at 10:59 pm

    Let me ask you … what is your plan ? You doing UI without wireframe ???

  16. Baker monther March 7, 2019 at 11:09 pm

    I wanna learn app design pleass

  17. Shankar Gurung April 6, 2019 at 7:06 pm

    is that black color rectangle is for measuring that margin and padding for the section time and again you did that so little bit confusion about that how much margin should be apply for the website please can you suggest me. And this is awesome video thank you for sharing your idea.

  18. John Kenneth May 17, 2019 at 5:52 am

    Hey man, It's my first time seeing this video and I can already relate about the fact that you do shapes to define spacing because I do the same although I'm just a beginner haha

  19. Linh Nguyen Thuy May 23, 2019 at 4:48 pm

    Thanks so much <3 I'm very interest in ur video //^^//

  20. naija online income July 1, 2019 at 10:48 am

    Thank you for the tutorial I was just wondering how do you add links and videos and many more the page and do you save as jpeg and how do you upload this as an image or what can you help me with the answers thanks so much

  21. Marlon Rube August 1, 2019 at 3:37 pm

    A great video, just what I was looking for.

  22. Hai Yen Ngo September 16, 2019 at 10:49 am

    Hi, I'm a newbie on learning designing website by PTS (before I use AI but It's not effective). Can you please help me to explain how to export all the elements of the landing page at the end to give to developer to code the landing page. Thank you.
    Love all of your works.

  23. Gabriel Trindade September 30, 2019 at 11:33 pm

    its so good to watch this video cuz, besides good and direct to the point, you are handsome as hell

  24. Lahiru Supunchandra. October 9, 2019 at 5:03 pm

    Nice work Mr. Serban. Please, can I let me know how to convert making a landing page to the HTML with bootstrap? And can you please tell me how to make grid like this. What's the difference between the 12 grid and 16 grid? Anyway, this is an I ever have seen the perfect tutorial from the photoshop landing page design. Easy learning and so clear. Thank you!

  25. hamza EL GASOUANI October 16, 2019 at 12:09 am

    thank you so much , how can the button be clickable ? i can t see how you did it in the video , > thank you again

  26. Deelan Sital October 19, 2019 at 12:20 am

    Once this process is done how do you port this over to a website program?

    I was looking at clickfunnels software. But does it require CSS rebuild again?

Leave a Comment

Your email address will not be published. Required fields are marked *