PHOTO EDITING 101 FOR WEB DESIGNERS: Free Web Design Course 2020 | Episode 13

Learn how to photoshop your picture for websites.

As a designer, you don’t always have a lot of time to invest in making a picture look beautiful. And that’s the thing: you don’t need a lot of skill or time to make something look good.

Make your websites look much better with these simple tricks on your photos.

· Intro 0:31
· Selection 0:56
· Background 6:39
· Shadows 7:13
· Clean-ups 11:18
· Editing colors 13:29

Watch every video of the Free Web Design course here:

Learn how to build custom websites with Webflow FAST:

Find me on other social media platforms:

Gear & Book Recommendations:

#FreeWebDesignCourse #webdesign #freelancer

Thanks for watching the video PHOTO EDITING 101 FOR WEB DESIGNERS: Free Web Design Course 2020 | Episode 13


  1. You are looking like a Money heist professor to me, is anybody there here who also feels the same as me?

  2. The most important whing is how to export the image and you didn't share that. Hope you make a video of that topic

  3. You gave me one more idea of what I wanna do in future😂…but also this course is really really very good nd specially the way you explain is🔥

  4. Thanks for teaching us how to use that gradient map tool. Now I know how to make my images look spotify-edited.

  5. Am I the only one who thinks the pen tool is pretty easy? I've been using the tool for about 3 years now out of my 5 years of Photoshop experience and this just feels pretty easy.

    I'm wierd aren't I……

  6. Can you recommend some self-assigned exercises at the end of the video? I'm coming up with them for myself but it helps when you give ideas because I don't know what all I can do with this skill yet. Thanks!

  7. Thank you for this tutorial. I noticed the light is coming from the bottom right, but the shadow indicates the light coming from top left-ish. Would you say it that stuff doesn't matter when making a website?

  8. Great lesson. I learned a lot. I am learning so much from this course. I am a content writer and I focus on crypto and other digital-related niche. I am currently writing for a site in crypto. I pitched my customer about crating a new one, and he said yes. Now, I am in charge of UI/UX design, SEO and content writing there. And I am using your free course to get a basic feeling about the UI/UX and move forward with the project.

  9. Hey @Ran, thank you for the video. If you get the time could you please perhaps talk about and compare Affinity Photo to Photoshop ?

  10. In this case (when the subject is already fairly separated from the background) wouldn't it be easier to use the quick selection or magic wand and edit the selection with the Laso tool? I am not saying you shouldn't get to learn the Pen tool!

  11. Hi Flux, I like your videos so far about Webflow. But seeing photo editing you have room to improve. 🙂 I have a strong background in this and just 1 tip for good shadows is not using only blur or multilayer shadows… this is not looking real at all. It’s about the perspective and distance + object color reflection that makes it real.
    If you like to learn more – drop me a comment 😉

  12. wow that's really useful bro, thank you!! 🙂
    btw I watched the whole course till now and everytime I watch it I learn something new.
    keep smashing it Ran!

  13. Ran, how did you learn everything you know, you went to design school? Feels like this is gonna take me one hundred years to master everything, glad I have you!

  14. When cutting an object I'm using pen tool too, but I'm making a mask and don't turning the path to selection and cut the photo. That way I can return and make corrections by editing the path (much better and safe). If the object is shaggy it's better to use the selection tool(s) and the select and mask option. And last – use smart objects 😉 That's my workflow for the product photos.
    Thanks for the videos and all the knowledge!

  15. Thanks so much Ran! There's a ton of tutorials on Photoshop but I haven't found anything focused specificially on photo editing for web design. Any recommendations anybody?

  16. guassian blur works good enough, but for more realistic shadows, use the Field blur and add a point on each end of the shadow. You can choose how blurred each point is. This is how shadows work. The closer a shadow is to an edge, it will be sharper.

Leave a comment

Your email address will not be published.