Web Design Tutorial | Search Bar

I hope that this tutorial helped you out. If it did please take 2 seconds and like the video 🙂 If you have any other tutorial requests please post them in the comments below. Download PSD: full.sc –My Networks– Website: www.kjfarrugia.com Twitter: twitter.com Facebook: www.facebook.com DeviantART: malcov.deviantart.com Behance: www.behance.net GraphicsHeart: www.youtube.com

The Web Designer’s Idea Book, Vol. 2: More of the Best Themes, Trends and Styles in Website Design

Web Design Inspiration at a Glance

Volume 2 of The Web Designer’s Idea Book includes more than 650 new websites arranged thematically, so you can easily find inspiration for your work. Author Patrick McNeil, creator of the popular web design blog designmeltdown.com and author of the original bestselling Web Designer’s Idea Book, has cataloged thousands of sites, and showcases the latest and best examples in this book. The web is the most rapidly changing design medium, and this book offers an organized overview of what’s happening right now. Sites are categorized by type, design element, styles and themes, structural styles, and structural elements. This new volume also includes a helpful chapter explaining basic design principles and how they can be applied online. Whether you’re brainstorming with a coworker or explaining your ideas to a client, this book provides a powerful communication tool you can use to jump start your next project.

24 Comments+ Add Comment

  • You’ve done a nice vid but for gods sake get rid of the intro music.

  • Hey guys here are some coupons for HostGator

    Youtube2012 = First month .01c
    ThumbsUp2012 = 25% Off

    Like if you use and they work for you! =D

  • Hi! i like your gradient maps on that green/lime search button and i hope your gonna upload those cool differents gradient maps and give us a link for download it:D and nice video:)

  • @MalcovDesigns Okey huge thanks:)

  • I use 300 for resolution and 2500×2500 for canvas size. Everything else is the default PS settings.

  • Hi Malcov what dpi / resolution, color profile and pixel aspect ratio do you suggest when makíng a website. I would really appreciate if you took your time and replied to my comment because i’m making a website layout for my school and i really need to know what suits the best when for website backgrounds. I’ve been a subscriber for a long time now and i hope to see you reply to my comment.

  • Thanks for the tutorial! Also helped with creating shapes!


  • May i release a CSS script that would allow the search bar to work if someone doesnt know how to? 😉 nice work btw.

  • Very awesome! Subbed!

  • Nice tutorial, however the “search” box is not necessary, only the magnifier image, the search box would need to be generated through HTML code and CSS code in order for it to accept an input, but anyhow nice tutorial! :)

  • awesome!

  • nice tut 🙂

  • Can this actually be used on a website? Or it’s just supposed to be a rendering of it?

  • get on skype!!!!
    remember me 🙂 - exseedthelimits

  • Great tutorial Malcov, quick tip, the search icon is a preset in photoshop in the custom shapes 😉

  • Amazing as Always <3

  • Could you make a simple tut about how to make a design for a website and code it? Maybe a serie :)?

  • Again, “Constructive criticism.” 😉 Don’t block someone for making a suggestion…

  • sexy <3

  • Like no. 60!

  • Great tutorial!
    And your website looks stunning!

  • That was a bit harsh. It was a good tutorial but you could try and speed up a bit. And he did say constructive criticism :L But hey. XD