7 other incredible tools I use when I design and build websites
Yet another post about 7 other tools you can use to improve your webdesign / development workflow
So my blog post called ‘7 incredible tools I use when I design and build websites’ got a lot of really good feedback. So I thought I’d share 7 tools more. There are a couple of these tools I don’t use that often anymore. Mainly because I’ve switch to designing/deciding in the browser.
I did another piece here on medium a week ago, which is a case study on my latest project, where I designed a website without photoshop. You can read it here.
With that said… let’s move on.
1. css3ps
CSS3Ps is a free photoshop plugin that converts your layers in photoshop to CSS3. You simply install the extension for photoshop, mark your layer in your document, hit the css3 button and after a few seconds it will generate the css3 code for you, which you can then copy/paste right into your stylesheet.
Website: http://css3ps.com/
Free
2. Slicy
So you’re done with your web design in Photoshop. And now you’re ready to slice it up. Instead of doing this manually you can use slicy, which will export all your assets for your website. All you have to do is rename your layer groups, drop your photoshop document into slicy and you’re done! All your images are now stored in a folder an you can copy/paste them to your project. It even supports Retina. All you do is append “+@2x” to the layer.
Website: http://macrabbit.com/slicy/
Free to try — $29 to buy
3. Animate.css
This little stylesheet makes it easy for you to do animations and they are even cross-browser compatible! You can customize your build of the stylesheet to only include the animations you want. I’ve used it a couple of times with some good ol’ jquery and it works like a charm. Try it!
Website: https://daneden.me/animate/
Free
4. GuideGuide
“Dealing with grids in Photoshop is a pain. With GuideGuide, it doesn’t have to be. Pixel accurate columns, rows, midpoints, and baselines can be created based on your document or selection with the click of a button. Frequently used guide sets can be saved for repeat use. Grids can use multiple types of measurements.” — enough said, this is a must have for photoshop!
Website: http://guideguide.me/
Free
5. Baseline generator
This website can help you get your baseline grid right. If you don’t know what it is. I suggest you google it. I’m not a master at working with a baseline grid, eventhough I should be, but practice makes perfect and this tool has helped me a lot so far. It calculates the correct amount of space between your text and output the css for you right away. Great tool.
Website: http://joshnh.com/tools/em-baseline-generator.html
Free
6. Dev Tools Mobile
Note: This tool only works in Chrome Canary at the moment. You can download chrome canary here: https://www.google.com/intl/en/chrome/browser/canary.html — Canary has all the latest Chrome features available.
There are hundreds of different mobiles out there and it’s hard to have them all. If you have some of the devices to test and debug on. You know it’s frustrating going back an forth between your mobile and desktop. Well not anymore. Google have just added Mobile Emulation to their Chrome Dev Tools. It’s very handy, if you for example like me, don’t own a Google Nexus 4 and want to see how your website looks on that device. The good thing is that I’m able to inspect elements on my site in the emulator. Nice!
I’d recommend you watch this demo on youtube from Paul Irish, where he will walk you through the entire thing in detail: http://goo.gl/JImsUh — it’s 24 minutes long.
Free
7. BrandColors.net
I came across this website recently and I’ve come back again and again ever since. The site is basicly just a long list of some of the biggest brands colors in the world. Instead of trying to find the right facebook blue, google blue, ikea yellow and so on you can go to this site and it will show the brand name and the correct hex value to copy and paste. It is also a great inspiration if you need some good colors for your website.
Free
I hope you could use some of these tools for your next project.
Twitter : @assentorp
