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.
For more landing page design video tutorials check out this playlist: https://www.youtube.com/playlist?list=PLwK4VEM_pKK07eveaQy8GVKwpMWlD_-AO
Join the waitlist for my upcoming “Character Vector Illustration for Beginners” Illustrator course and get a big discount at launch: https://www.cosminserban.com/course-launch
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!
━━━━━━━━━━━━━━
↓ ULTIMATE 23 Grain and Noise Brushes + 16 Vector Textures for Illustrator and Photoshop ↓
https://gumroad.com/l/hcTAc?offer_code=texturegang
━━━━━━━━━━━━━━
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
I’m also using Envato elements in my design projects which offer over 53 million graphical assets for $16.50/m for unlimited downloads:
https://1.envato.market/cosmin
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
http://creativecommons.org/licenses/by/3.0/
#photoshop #webdesign #tutorial #homepage #landingpage
source
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
Dear sir, it absolutely amazing design, but sir, if you want the web actually work you need coding right because at the end it is still a photo ? Thanks you so much for explaining sit
Loved how clean and smooth it turned out.
Great worth 👌
This one was creative and time-preservative for me. Though I am a beginner, I understood your explanation. Love from Nepal <3
OMG !! your likes are 911 so far. just joking.. amazing colour combination
I honestly couldn’t find web design tutorial like yours! This is my head start! Thanks for this lesson. I hope you do a prototyping next!
Realy you are great
It's so nice of you to give us so much details, and a Psd file ! Such an informative video, and your way of talking keeps us focused, thank youuuu
I have opted in 3 times but haven't received your email yet!
Please, if you can, shoot me this file to alekuzunovic@gmail.com <3
Thanks for the value! You are a beast!!
Thank you, it's helpful to me!
its good but how to make it with html css
I'm hoping to animate for an interactive website, so this is VERRRRY helpful! Thank you!
hi, sir how can I animate my PSD design please tell me something about it?
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.
Thanks for uploading this video!!! Respect!!
ok so you designed it but now how do you go about actually uploading it and making it functional and interactive?
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 🙂
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.
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!
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?
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.
great design and the way you explain details, thank you!
I love this design bro
Dude you are one of the best designers I've seen! Well done!!
Can I use your header graphic for my commercial project?
Wow, it's awesome. Thanks for your great video
Amazing video's your channel deserves more views!
Have found your channel few days ago and truly happy to watch here tutorials. It really motives me to do something on my own.
Love your videos, very innovative. Hope you keep creating more !!!
inspiring!
Respect man what's you teaching to us Thumbs up
اغغعييفععببفررعبارهةار وررلضنررايذيذيعؤتراختبا.لبفسغي
Awesome design. Love this & Great work.
Сool done
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
It's amazing, thank you 🙂
Great. Do more videos likes this. Love to see how other designer's thing and the creative process. Great work