On this page you will find the favorite tools I use to design and create websites and images, as well as books and courses on these subjects. I reference these tools a lot in my blog posts because I love and use them.
Adobe Photoshop is THE tool that I use for image creation and design. Not only that, but if I need to resize or crop an image for a website or blogpost, add effects, text, awesome filters, or remove wrinkles from my parent’s photos, I use Photoshop to do it. Adobe now requires a subscription to the Adobe Creative Cloud to get access to the latest version of Photoshop. An alternative to the subscription service would be Adobe Photoshop Elements 14, which maintains most of the common tools you might use for image and photo editing.
You can get a free Adobe Photoshop CC trial though Amazon here: Adobe Photoshop CC | Free Trial Available.
You can purchase Adobe Photoshop Elements 14 here: Adobe Photoshop Elements 14
GIMP Photo/Graphic Editor
GIMP, or GNU Image Manipulation Program, is another popular image/photo editor. Although it’s not as slick and generally easy to use as Photoshop, GIMP is open-source and FREE to download and use. It serves as a viable alternative to Photoshop and I’ve used it plenty over the years prior to getting Photoshop.
Adobe Illustrator is the premier vector graphic. If you want to create a logo yourself, or get into logo-creation, this is the software you need to do it with. Like Adobe Photoshop, Illustrator’s most recent version is available through Adobe Creative Cloud as a Free Trial.
You can get a free Adobe Photoshop CC trial though Amazon here: Adobe Illustrator CC
Inkscape Illustration Software
Inkscape is to Adobe Illustrator like GIMP is to Photoshop, and is another tool I like to use from time to time. The nice thing about Inkscape is that it is open-source and free. It has a bit of a learning curve though, but does it’s best to try to model itself after Illustrator.
Frank DeLoupe Color Picker
Possible the coolest Mac App ever. Frank DeLoupe is a color-dropper that sits in your menu bar for easy use. Use it to grab a color value in hex, rgb, hsl, and more, from anything you are looking at. It also integrates with Photoshop, making it easy to grab a color off a website or photo and that color be selected in Photoshop. Frank is available in the Mac App store.
Web Development Tools
Over 70 Million websites run on WordPress, including this one. Need I say more? Well, I will anyway. Once put down as simply “blogging” software, WordPress is actually a full functional and extensible CMS, or Content Management System. What does that mean? Well basically it’s very capable when it comes to creating different types of content, and moving and managing that content around your site. WordPress is FREE and many web hosts have 1-click installs. You could use a WordPress.com hosted site, but I don’t recommend if it if you are serious about building a website long-term.
Alternatives might include Joomla, Drupal, or Expression Engine. Each has their own learning curves. We will be working with WordPress here.
Sublime Text 2 Text Editor
The Sublime Text series of code editors have been tremendous over the years. ST2 has been my code-editor of choice since I started coding my first website several years ago. It offers loads of modification caabilities/extensions, great syntax-highlighting schemes, amazing shortcuts and tricks, and a slick interface. Sublime Text 3 is in BETA right now.
Codekit for Web Development
This app is for the Mac platform only. It can do a whole bunch of crazy-awesome things, some more technical than others (e.g. compiling code, working with COMPASS, SASS, SCSS, etc. ) but for our purposes, two coolest things are live style injections and image optimization. It also integrates very well with Sublime Text. See what I mean by “live style injection” in the video below:
That’s pretty awesome, huh? Codekit can also optimize a folder full of .jpg and .png images, losslessly. Reducing the file size of your images means your website loads faster, which is better for user experience and, in the case of a ranking tie in Google…could mean the difference in SERPs position.
Codekit 2 is the current version of the app. It’s added several new features, including local hosting, allowing you to develop WordPress site, for example, on your computer before pushing it live on the internet. I still use the original Codekit at the moment.
Filezilla FTP Client
Filezilla is a very popular FTP program. It allows you to upload and download files, plugins, images, themes, etc. between your hosted website and your computer. If you develop your site on the computer first, or just want to backup the files locally on your computer, an FTP program is going to make this easier for you rather than going through your hosting service’s web platform. It’s free.
GitHub is a fantastic online repository for code and a wonderful community. GitHub allows for versioning of your code, so you can make changes and save a copy of your new code, or revert to earlier versions of that code. It also promotes collaboration by allowing others to “fork” your code and create bug fixes, or new use cases. It’s a lot to take in, but I use this app mostly for simple versioning. If you get heavy into web design/development, you’ll be using this frequently.
MAMP for Local Development
MAMP stands for Mac, Apache, MySQL, PHP. It’s a program that allows you to develop in a PHP server environment locally (WordPress runs on PHP). I build all my sites locally on my Mac before I upload them live. Doing this also serves as a backup to your live site, as long as you keep them updated with each other. It’s also great for testing things before you push them live, like plugins, opt-in forms, code, etc. If you don’t have a Mac, there are WAMP (Windows) and LAMP (Linux) programs that operate similarly. MAMP is free, but there is a Pro version as well.
Gameplay Recording with Elgato Game Capture HD
Want to record your video game footage and upload it to YouTube or live stream it to Twitch? This is what you want to do it with. Elgato Game Capture HD works with PS3, PS4, Xbox 360 and Xbox One, and comes with software to help edit and manage your videos on your PC or Mac
You can purchase the Elgato Game Capture HD here: Elgato Game Capture HD, for PlayStation 4 and PlayStation 3, Xbox One and Xbox 360, or Wii U gameplay, Full HD 1080p
Screen Recording with QuickTime
Not a lot of people know this, but you can record your screen AND simultaneous audio with Quicktime on Mac, in full quality and with decent audio. The only reason to purchase software for screen recording on a Mac would be if you needed additional features beyond simple screen and audio recording.
Screen Recording with Open Broadcaster Software (OBS)
OBS is “free, open source software for live streaming and recording”. It’s available for multiple platforms including PC and Mac.
Divvy Application Management
Divvy is a must-have little app for Macs AND Windows Machine. It allows you to your application windows evenly using an adjustable grid. Simply call the short-cut to bring up Divvy, which displays a small grid in the middle of your screen, which represents your entire computer screen, then drag out a box size on that grid, which will take the current app you are working in and resize and position itself just like you asked for in Divvy. Even better, is you can set up short cuts for different size/positions. Use the Divvy shortcut, and then press which ever key shortcut you set up. E.g., I use control + D to bring up Divvy, then I select F for to take up the whole screen (with Dock), Q, W, E, R, for quadrants, or B, N, for half-screen. So for instance, I might select my browser, and select B to be on the left half of my screen, then select Sublime Text and select N to be on the right side.
The image at the top of this page shows Divvy in action.
LastPass Password Manager
LastPass is a password manager. It will save your login identification and links for each website you want it to. When you’re in and out of your own websites, affiliate programs, and social media profiles, it’s a nice thing to have. It can also generate random passwords for new logins or update existing ones and remember them so you don’t have to! It’s free if you use it only on desktops OR only on mobile. It requires premium access to sync across both platforms.
Web Design Books
HTML & CSS by Jon Duckett
This is the first book I picked up when I wanted to learn HTML & CSS. It’s beautifully laid out with full color pages and code examples. The only thing is doesn’t do is show you how to get a domain, hosting, and uploading your website so it’s live on the internet. I highly recommend this one if you are starting to learn Web Design.
Take a look at HTML & CSS on Amazon.com: HTML and CSS: Design and Build Websites
Handcrafted CSS by Dan Cederholm
Handcrafted CSS is another beautiful book dedicated to Cascading Style Sheets (CSS). These days, knowing a bit of CSS is really helpful if you want to modify your website/WordPress theme in ways that it is not capable of by default. I’m always tinkering with themes, whether I made them or not.
Take a look at Handcrafted CSS on Amazon.com: Handcrafted CSS: More Bulletproof Web Design
Thinking With Type by Ellen Lupton
Typography is everywhere you look: street signs, concert tickets, books, and blogs. Typography outlines a heirarchy of information that creates an easier and effective reading experience. Thinking With Type teaches the fundamentals of good typography that you can use in your blog posts, emails, and lead/squeeze pages.
Take a look at Thinking With Type on Amazon.com: Thinking with Type, 2nd revised and expanded edition: A Critical Guide for Designers, Writers, Editors, & Students