How to Design a Simple Landing Page Using Photoshop CC


Hey, what is up guys, my name is Cosmin
and in today’s video we’ll design a landing page inside Photoshop by using
this illustration, now if you haven’t seen the video where I go over the whole
process of designing the illustration, you can finally get the description, I
like to thank again The Simple Designer things they have such an amazing
community and featured that video on their channel. You can also find the
source files for both the illustration and the landing page in the description
below, let’s head into Photoshop and get started. Let’s create a new document I
call it food ilanding, I’m going to start with the width of a level 1170 pixels and
the height is not so important since I’ll adjuste it later, maybe have something like
1600 and hit enter, let’s grab the crop tool since this is way too tall for what
I need then hold down alt to adjust the bottom as well as the top, you can start
adding some guides on the sides and in the middle, to make sure you can see them,
go to view and enable extras and rulers. I’ll go back into the illustration
document and create two rectangles which will have our two main colors, I’ll paste
them into Photoshop and using the eyedropper tool I’ll sample them and
save them in the color swatches panel so I can have them for later. As you can probably tell I’ve added two
shapes one will be the main body and the smaller one is where I’ll place the
illustration, place the illustration in the document are let’s find a good spot
for it in the smaller shape, right now I’m trying to place it somewhere in the
middle so I’ll use my arrow keys to position it and once i’m happy I’ll want to
create a mask and hide the line that’s coming out.
Hold on command and click on the shape layer thumbnail and then just add a mask
to the illustration layer, right now I’m trying to think what I can do to improve
the background, first thing I’ll unlock background layer and duplicate the main
body shape and use that as a actual background layer,
collapse that panel so I can have a better view and let’s rename this layer.
Once I’m done with that I’ll hit command T to transform it and now I can make it
bigger, let’s add a subtle gradient again just by using those two main colors, I’ll
use the red for the one on the right and the dark blue for the one on the left,
this is not it, yeah this is the right one and close all
of the panels by hitting okay. Right now it has way too much red
so transform it again place it down and increase its size and why not even more. After I’ve added the text elements I’m
going back to the background since there still room for improvement and create a couple
of square shapes, let’s have the first one here, hold down Shift while dragging
to keep its ratio the same and I’ll align them with the bottom of the
illustration, I’ve copied the layer style from the background shape and paste it
to the rectangle layer, again it’s way too much red for my liking so let’s
lower its opacity, 14% should be okay and while holding down the Alt key let’s
create a duplicate of that shape and place it lower, for this one let’s maybe
increase the opacity to somewhere around 40%, duplicate it again and move it on
the right side, do small adjustments until you’re happy with something, now
keep in mind I don’t really have an exact idea of how I would like this
background to look I’m just exploring. I’ll do the same for the top-right
corner, so let’s duplicate the shape and place
it over there, make it smaller and start playing with the opacity percentage till
if there’s something that doesn’t take away too much attention from the main
body but just gives it enough detail to make it interesting. I wanted to slow down the video here to
give you a look how I’m using shapes to define the spacing between elements and keep them
consistent it’s a small thing but it has such a great impact on the way the page
looks in the end, I really suggest trying it, anyway this is the final look of the
landing page, I wanted something very simple that only uses two colors and the
illustration helps set the mood, don’t forget to hit the thumbs up button if
you liked this video and subscribe for more, as always if you have any questions
leave them in the comment section below or contact me on my website and I’d be more
than happy to help, till next time, take care guys, bye!

12 Comments

  1. The Simple Designers April 27, 2018 at 5:08 pm

    great video as always, can't wait to see this channel reaching the first milestone <3 <3

  2. AHT JOHN April 27, 2018 at 5:14 pm

    welcome back ! & i'm waiting your upcoming next tutorial..

  3. Бастин Џибер April 27, 2018 at 5:40 pm

    Simple, effective and great looking. Nice collab, guys.

  4. Ardent Designs April 27, 2018 at 9:51 pm

    Nicely done.

  5. Arunz Creation May 3, 2018 at 5:40 pm

    Hi….its nice to see your videos…..great keep it up

  6. Skillthrive May 6, 2018 at 1:53 pm

    Nice work, Cosmin! I like your cutback scene. I wish I had an interesting space to do that lol. That's why I use the green screen 😀

  7. Vlad Prodan June 10, 2018 at 9:02 am

    Googd work, bro! Do more!

  8. Cody Brown June 26, 2018 at 11:14 pm

    Good stuff! Love the collaboration

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

  10. Apu889 October 14, 2018 at 1:09 pm

    i cant believe you only have 1.9k subscriber. and im happy im one of them 😉 please keep making these modern illustration videos, it really opened my eyes hehe

  11. RomsHDx October 21, 2019 at 8:21 pm

    bro you are awesome! 🙂 more!

  12. Muhammad Arslan January 14, 2020 at 7:06 am

    amazing work

Leave a Comment

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