• Tuesday , 26 May 2020

Web Design Tutorial For Beginners Using Photoshop

Code Canyon


Today’s video brings you a web design tutorial inside Photoshop CC where I’ll go over the whole process of taking an old landing page and turning it into a modern looking one, that has a pretty unique visual style.

Get full access of the fully layered Photoshop file that includes the web design of this homepage here: https://www.cosminserban.com/web-design-tutorial-in-photoshop

You can use this template for free in any of your projects. Have fun!

If you want to support this channel and get access to exclusive content like the realtime recordings of tutorials (unedited), timelapse videos, design podcast and custom illustrations check out my Patreon page:


About this landing page project: The client asked for a refreshed version of one of their existing landing pages, in the past they’ve been using a generic template and wanted to move as far away from that as possible.

Came up with a couple of new ideas, introduced some very vibrant and modern colors, put a lot of thought on how this landing page can stand out from the crowd and remove friction.

The first step was to create a wireframe using the initial content that was on the landing page and then add more space.

Most of the final graphics were done using Illustrator, then copy and pasted inside Photoshop.

Just in case you’d like to learn how to design a landing page in real-time, check out my course: https://www.patreon.com/posts/full-course-page-25498918

Don’t forget to like this video if you’ve enjoyed it and subscribe for more graphic design tutorials!

About me // My name is Cosmin Serban, I’ve been a graphic designer for over 10 years now, started my career by doing logos and small websites for clients around the world, right now I work as a Design Consultant for https://www.instapage.com

If you’d like to say hi or if you have a project in mind, you can get in touch with me here: https://www.cosminserban.com

Follow me on Instagram: https://www.instagram.com/cosmindesign/
Read articles about “Design Mindset”: https://medium.com/@cosminserban

Music: Lobby Times Kevin MacLeod (incompetech.com)
Licensed under Creative Commons: By Attribution 3.0 License

#photoshop #webdesign #tutorial #homepage #landingpage

View Original Source Here

3d Ocean

Related Posts


  1. Cosmin Serban
    July 19, 2019 at 14:08

    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

  2. sayed babu
    July 19, 2019 at 14:08

    hi, sir how can I animate my PSD design please tell me something about it?

  3. Isabelle Holland
    July 19, 2019 at 14:08

    Thank you so much for sharing. Love the video! How do you make sure this layout for the Landing Page will fit for responsive design, for example, all smartphones/iphones and ipads/tablets? Do you create a separate similar design? Thank you for your help.

  4. Anything And Everything.
    July 19, 2019 at 14:08

    Thanks for uploading this video!!! Respect!!

  5. alvinraydj3
    July 19, 2019 at 14:08

    ok so you designed it but now how do you go about actually uploading it and making it functional and interactive?

  6. oOGeekITOo
    July 19, 2019 at 14:08

    What a stunning design! Thanks for showing it and parts it consists of in photoshop. I really struggle with Photoshop and Illustrator since i'm more a front-end dev than a designer, but still as a freelancer i have to create smth similar to what you did as well as write code 😉
    Can you make more of PS tuts like this where you would show the process and the way you create wavy shapes/figures/whole webpage designs or designs in Flat/Material/Fluent/geometric design? I know it's a time-consuming activity but still.
    Btw, i subscribed 😉

    P.S. Nice beard, man 🙂

  7. Lloyd Luciano
    July 19, 2019 at 14:08

    Hey, I like your design and how you structure everything out. I hope I can be as good as you as I keep on practicing and learn photoshop 🙂 Thank you for such great content videos.

  8. Vince Fury
    July 19, 2019 at 14:08

    thanks for the vid! question: Do you take this design and add it as an image in your css, or is this just a wireframe model that a developer would then translate into html and css? Thanks!

  9. Tiel Plays
    July 19, 2019 at 14:08

    Can people actually do something with it or is it just for the fun?

    And if they can, do you have to, for example, make every button a layer?

  10. Loris Vella
    July 19, 2019 at 14:08

    That's cool man !
    Could you make a video of the next step, I mean the animation part ? how do you explain to the devs the way you want the animations etc.

  11. Валерия Иванова
    July 19, 2019 at 14:08

    great design and the way you explain details, thank you!

  12. It wasn’t Me
    July 19, 2019 at 14:08

    I love this design bro

  13. Victor Santana
    July 19, 2019 at 14:08

    Dude you are one of the best designers I've seen! Well done!!

  14. Shariful GR
    July 19, 2019 at 14:08

    Can I use your header graphic for my commercial project?

  15. Shariful GR
    July 19, 2019 at 14:08

    Wow, it's awesome. Thanks for your great video

  16. Dimitri Dehouck
    July 19, 2019 at 14:08

    Amazing video's your channel deserves more views!

  17. Michelle Kristin
    July 19, 2019 at 14:08

    Have found your channel few days ago and truly happy to watch here tutorials. It really motives me to do something on my own.

  18. Vanilla Col
    July 19, 2019 at 14:08

    Love your videos, very innovative. Hope you keep creating more !!!

  19. Ananta Bangun
    July 19, 2019 at 14:08


  20. Waqas Azam
    July 19, 2019 at 14:08

    Respect man what's you teaching to us Thumbs up

  21. المنذر يحيى
    July 19, 2019 at 14:08

    اغغعييفععببفررعبارهةار وررلضنررايذيذيعؤتراختبا.لبفسغي

  22. Golamrabbi Azad
    July 19, 2019 at 14:08

    Awesome design. Love this & Great work.

  23. Новый Порядок
    July 19, 2019 at 14:08

    Сool done

  24. NepalCode TV
    July 19, 2019 at 14:08

    Are sure that it looks good in small devices? i hate coding that type site they never looks good in small device unless i change whole background

  25. Jon Habibulloev
    July 19, 2019 at 14:08

    It's amazing, thank you 🙂

  26. Angelos A.
    July 19, 2019 at 14:08

    Great. Do more videos likes this. Love to see how other designer's thing and the creative process. Great work

  27. Simple Designer
    July 19, 2019 at 14:08

    amazing video as always , keep creative bud

Leave A Comment

You must be logged in to post a comment.