Previous | Next

Resource Masterpost

To kick off 2018, I've created an extensive post for everything I use or have used to make my work life easier and more efficient! All links are for free resources because, even though I do pay for resources to be able to create the best content I can for you all, I know free is always best for personal use.

If you want to be notified when this post gets updated, just track my updates thread! I'll post a comment each time I update the list. Have questions and/or need specific recommendations? Leave a comment! You'll probably remind me of something I meant to put on the list and forgot.

PROGRAMS BROWSER EXTENSIONS WEB DESIGN IMAGE RESOURCES DESIGN RESOURCES

PROGRAMS

GIMP
https://www.gimp.org/
Like Photoshop but cheaper; we all know what GIMP is by now, but trust me guys! It's a really robust program. There are things it just can't do that Photoshop can, of course, but for the low low price of free, you're really getting a lot out of it.

Visual Color Picker
https://sites.google.com/site/novosibsoftware/visual-color-picker
I use this program a lot when designing. Drag and drop the eyedropper tool and grab your color in HEX or RGBA format! Super light and super easy program.

Screen to Gif
http://www.screentogif.com/
Ever wish you could make a gif fast? Here you go! Just position the window cutout where you want it, drag to resize, and record! This is what I use when the preview image for a layout would be much more informative as a gif.

BROWSER EXTENSIONS

Open Screenshot
Great for on the fly screenshotting and editing in your browser! I use this to snag image previews for my layouts and codes, and I love being able to crop while I'm there so I don't have to open a new program just to crop an image.

LJ Juggler
I'm pretty sure we all know this one exists at this point, but here's IJ Juggler just in case you didn't! Toggle between IJ, DW, or LJ accounts with a button click!

WEB DESIGN

Lipsum
https://www.lipsum.com/
Grab your placeholder text here!

Color Hound
http://colorhound.net/
Generate a list of all colors used in a stylesheet so you can see what's where when replacing colors! Fast and easy, but only for CSS. HTML codes won't work in this; sorry!

My Code Tester!
http://tessisamess.com/codetester
I know, I know. We all know about this one haha. I literally never go a single workday without using it though—I'm even using it right now to make this resource for you guys! And the newest version of my code tester is the best yet! It color codes syntax, allows you to save your code with a button click, and had auto-previewing!

W3Schools
https://www.w3schools.com/css/default.asp
This is your one stop shop for all CSS and HTML info. I've linked directly to the CSS section, but they have it all! Trust me; if you're looking for information on a specific thing? They'll have it.

CSS Lint
http://csslint.net/
Did you break your layout? Do you just want to make sure it's all clean before doing anything else? CSS Lint will point out errors for you. (Sometimes the errors aren't errors, but overall this program will save you a ton of headaches, especially if you're not confindent in your CSS skills.)

CSS3 Generator
http://css3generator.com/
If you're trying to learn how to design I definitely don't recommend using shortcuts like this generator to avoid having to actually learn the syntax, but this tool is a great one for speeding up the design process or for live previewing what you want to do before sticking it into your layout!

Colorzilla Gradient Generator
http://www.colorzilla.com/gradient-editor/
The same goes for this one; if you're really wanting to learn CSS please don't rely on generators to do the work for you or you're not really going to learn anything, but if you're just editing a layout and need a gradient for it, or if you understand gradients and want to live preview and save time, this is a great generator!

CSS3 Patterns Gallery
http://lea.verou.me/css3patterns/
Aaand the same goes for this one too, haha; if you're really wanting to learn CSS please don't rely on generators to do the work for you. I don't really use this one, but I love that it exists and it's VERY cool; I think you guys are going to love it too!

IMAGE RESOURCES

Embrace stock photography! I use it in almost all of my demo layouts and codes. Stock doesn't have to be ugly or cost hundreds of dollars a year, and as an added bonus you're not stealing other people's content. These sites are generally completely royalty-free!

Pixabay
https://pixabay.com/

Unsplash
https://unsplash.com/

Pexels
https://www.pexels.com/

Subtle Patterns
https://www.subtlepatterns.com/
Nice, simple, subtle seamless patterns for all your background needs!

Icon Archive
http://iconarchive.com/
Not all of these icons are free without attribution (but they are all free), but most should be for your personal use needs! If you're releasing layouts or similar, check the usage info.

DESIGN RESOURCES

I highly suggest subscribing to the newsletters for some of the sites listed here, as some free deals are time sensitive and it's always nice to get notified when new free content gets put up for download. I won't be detailing each site here, because they're all fairly similar in that they're all creative marketplaces with free content sections. Some of these sites run amazing monthly bundles at a huge discount, which is another reason to sign up for their newsletters!

Creative Market
https://creativemarket.com/free-goods

Creative Fabrica
https://www.creativefabrica.com/subscriptions/freebies/

Font Bundles
https://fontbundles.net/free-fonts

The Hungry JPEG
https://thehungryjpeg.com/freebies/

Design Cuts
https://www.designcuts.com/product-category/freebies/

Design Bundles
https://designbundles.net/free-design-resources
Tags:

Comments

Jan. 2nd, 2018 09:35 pm (UTC)

SEND ME UPDATES!

Track this comment to get IJ emails when this list is updated!