Resources header divvy

Resources

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.


Design Tools

 

Adobe Photoshop

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

photoshop

GIMP Icon

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.

You can learn more about GIMP and download it here. 

Adobe Illustrator

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 logo

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.

You can learn more about Inscape and download it here

frankdeloupe

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.

You can learn more about and get Frank DeLoupe here

frank deloupe ferrari

 


 

Web Development Tools

 

wordpress logo

WordPress

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.

You can learn more about WordPress and download it here.

Sublime Text 2 Logo

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.

You can learn more about Sublime Text 2 and download the free evaluation period here.

 

codekit logo

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.

You can learn more about Codekit and download it here.

filezilla logo

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.

You can learn more about Filezilla and download it here.

github logo

GitHub Desktop

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.

You can learn more about GitHub here

You can learn more about the GitHub Desktop app and download it here.

mamp logo

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.

You can learn more about MAMP and download it here.


 

Screen Recording

 

Elgato Game Capture HD

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

quicktime logo

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.

OBS logo

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.

You can learn more about Open Broadcaster Software and download it for free here.


 

 Miscellaneous Tools

 

Divvy app logo

 

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.

You can learn more about Divvy for Mac and download it here.

You can learn more about Divvy for Windows and download it here. 

lastpass logo

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.

You can learn more about LastPass and download it here.


 

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