My name is Matthew McKey and I am first and foremost a Web Developer. Recently, I was asked to design a banner for a friend of mine’s blog. Web design is something that I find goes hand-in-hand with development but it is definitely a secondary, if not tertiary nature to me. At dezinsINTERACTIVE empowering yourself through learning is encouraged, empowering others through your learning is an obligation with positive connotations(by the way, I’m a rapper, for the record, just statin’). That being said I was able to discover a couple of tools that are extremely friendly to those who don’t know much about color theory, presentation, advanced Photoshop & Illustrator techniques, and a score of other things that go along with being a web designer.
At the beginning, all I was given was the concept: during her underclassman years at LSU, she decided to move to Los Angeles for a summer and managed to network her way into working for Latoya Jackson and a host of other famous people. Long story short: the blog was to be about her experience living in Louisiana but also working in L.A. So, using my extremely limited code-oriented design mind I was able to at least visualize the concept of the flight paths between states going through her head.
So to get down to the point, here is the banner I designed and the tools that helped me do it.
1)PLTTS – This site was one of the most helpful sites I’ve found as far as color schemes and inspiration go.
From the top down, you have the navigation and to the right there is a search field that lets you type in the hex value of a color ,minus the # (which is called an octothorpe by the way), and then will show you color palettes that contain that color, or close matches.
Below that you can see the top 20 color palettes as voted by the site’s users. Along the right you can see the Top 10 Hex colors that have been submitted to the website.
I got the idea for the colors for this banner from here:
2.) Google – Google is an invaluable tool for finding whatever you need. I know this tool seems kind of bland or general but hear me out. As a web developer, I just simply do not have the time to sit in Illustrator and draw out the vectors for the Louisiana & California states, as well as the vector for the plane.
This is where Google saved my life. A lot of times you can just google ‘(insert query here) free vector’ and if you can’t find a free vector you’ll at least be well on your way to discovering something workable.
Through Google I was fortunate enough to find free vectors/usable images for the states and the airplanes.
3.) Font Squirrel – This site is a god-send for those who do not have time to either design fonts or go through millions of different fonts looking for that perfect fit. They have an easy to use interface and I was able to send the link to my friend and let her pick out the font she wanted used on her own time(time is a pretty valuable currency amongst both web designers and developers). A bonus feature of Font Squirrel is the ability to make a @font-face (read: web font) out of a good portion of the available fonts; but that’s a development tip I’ll keep for a later post, as they say “A magician is never asked, and a lady never tells”.
4) Redpen.io – Redpen is an amazing tool for rapid feedback. You upload a picture, share the link with someone, and they can drop little pins and leave comments on your design / work. As far as explanation goes, a picture is worth a thousand words so click below to see the usefulness of our designer Evanna’s feedback:
5.) Brusheezy – This is a site that was recommended to me by our designer, and I took her advice and was easily able to find a set of brushes for Photoshop that produced the pattern you see on the background.
I used the Grunge Halftone brushes. I know that grunge was a sub-genre of rock music in the 90’s and is used to describe people who are hygenically challenged. I still don’t even know what halftone means, which is why I had no idea what to look for when our designer told me to look into them. But I took her word and sure enough it worked out. Try it out if you’re low on time but keen on efficiency.
So there you have it, this is just the tip of the iceberg as far as design resources that are available on the internet. But if you’re like me and you struggle every morning to match clothes, this little toolkit will provide the basics for what you need to get a design going. Next in this series:
Five Tools for Web Developers That Make My Life Easier