Tess (tessisamess) wrote in layouttesst,

Resources, Oh My!

For a while now I've been wanting to do a resource post for you guys. Below, you'll find various things for CSS and graphics work, mostly places I visit/use weekly, if not daily. Ready for the best part? Every single resource on this list is 100% free -- and legally so. Enjoy!

xo Tess

PS. Sorry for my potty mouth.

*All links open in new tabs.

Color Scheme Designer Even if you have flawless taste in color matching, this site can be a lot of fun. Get different shades of the same basic colors, or get a scheme of complimenting colors!

W3Schools » CSS I know a lot of CSS without having to check myself these days, but when I do need help? This is the first place I go. Whether you're just trying to edit someone else's layout, or want to start learning CSS yourself, this site is definitely where you want to be.

Layouttesst HTML Tester Wanna be able to preview your code without downloading anything or potentially having a mess in your profile or RP resource code? This'll help! Just remember -- the reason your manual breaks aren't showing is because it only recognizes br tags and p tags for line breaks. This is literally the only place I go to test profile codes before testing them in an actual profile page. Also, even after previewing, CTRL+Z still works, which is why this is replacing the W3S Tryit page. *My code tester has replaced the Draac one because, well, this.

The CSS Color Extractor You know what this is awesome for? Getting your colors out of your stylesheets to give as replacement guides. And it's simple as hell to use. Note: If you're going to use this to extract colors from someone else's layout to use, please be courteous and ask the maker if it's cool.

Malionette's Tinyicon Generator If you use my layouts, you've probably seen that phrase before. It doesn't make tinyicons for you (that's what I'm here for -- ba-dum-chh), but it DOES generate the code for you to replace user, comm, locked, and private icons in your LJ layout! It's incredibly handy.

Favicon "The fuck is a favicon?" You may be asking. Well, you know how when you visit Livejournal, there's a little blue pencil up in the tab? That's a favicon. But Favicon isn't just good for making site icons! It's what I use to make my tinyicons. Just remember to convert them to a PNG before uploading them. Which brings me to...

Format Factory If you're only going to be making one icon here and there, there's no need for this. But say you just made a whole batch on Favicon, and don't want to open them in PS or GIMP to convert them all individually -- that's where this program comes in. It's not just good for formatting ICO to PNG. You can reformat almost anything.

Google Web Fonts If I could, I would have sex with this website. Yes, I did just say that. If you want a custom font in your layout, this is basically the only place to go -- literally. It's more limited than being able to use any font ever made, but they have enough of a selection that it's never really hindered me. To see a small tutorial on how to use GWF in your layout, I have one here; an explanation of why using fonts hosted elsewhere doesn't work is talked about in the comments.

Visual Color Picker This is exactly what it sounds like. It's a program where you can drag an eyedropper anywhere on your screen, and get the color codes for the color you've selected.

GIMP It's known as the poor man's Photoshop, but I actually prefer it. Whether you don't know how to get a free version of PS, or you don't want a free version of it and are too poor to buy it, GIMP is the #1 best alternative there is. And the GIMP community is huge, and chock full of user-made tutorials. There is more than one site dedicated to it. And did I mention that user-made PS brushes work in GIMP with no conversion needed?

Dafont Dafont is, I've found, one of the best free font sites there is. Now, these fonts won't work in CSS unless they're also hosted on Google Web Fonts, but they're great for graphics work. But don't make me go on a typography rant; choose your fonts wisely. Sidenote: Anyone who wants a typography info post, please speak up! I'd be happy to bitch give some insight on font use.

CSS3Generator A fellow named Randy Jenson was nice enough to build this generator, thereby enabling people like me to be lazy sons of bitches save time when coding! It has a live preview so you can put in your values and test anything from box shadows to text shadows to border radius and more before putting it into your CSS!

S2 Smooth Sailing » Stylesheet Base SS stylesheet. You'll definitely need this if you're going to make your own layout!

S2 Smooth Sailing » Breakdown A complete breakdown of each section of the SS stylesheet, what it does, and where it is -- complete with illustrative screencaps. Very, very helpful.

S2 Flexible Squares » Stylesheet Base FS stylesheet. You'll definitely need this if you're going to make your own layout!

S2 Flexible Squares » Breakdown A complete breakdown of each section of the FS stylesheet, what it does, and where it is -- complete with illustrative screencaps. Very, very helpful.

I know I'm forgetting some things, so this post will be updated from time to time. Be sure to add it to your bookmarks! Below are some tutorials I'm thinking about doing. Give a shout if you're interested in any of them! Or, if there's something I haven't mentioned that you want to learn, you can comment with that too!

How to do transparency in GIMP.

[DONE] Fonts: How to use them & common mistakes.

Using CSS styling in your LJ posts.

Now, I am by no means the end-all expert on CSS and graphics, but I know enough at this point that I am comfortable giving introductory-to-medium-level lessons in CSS, graphics, and HTML. If anyone is interested in this and doesn't mind paying a (very) small fee, please let me know!
Tags: ^resources
  • Post a new comment


    Anonymous comments are disabled in this journal

    default userpic

    Your IP address will be recorded