Designing Aesthetic | Tips, Principles, and More

[Chai]

A Guide to Design by Chai

---

There's a lot to be said about using aesthetics in roleplay posts. But what even is aesthetic? According to Google it is:

aes·thet·ic

/esˈTHedik/
adjective

1.
concerned with beauty or the appreciation of beauty.
"the pictures give great aesthetic pleasure"

The content of the Internet is so visually based that it tends to draw the eye immediately. Interestingly enough, there are studies that show people associate more beautifully designed products as "better," even if that's not necessarily the case. I know, go figure, right? You mean to tell me that people like beautiful things? We could have a whole discussion on that, but this thread is not the place for that.

This thread is about design for both graphics and screen. What I mean by that is: if you want to improve your ability in making attractive graphics, this thread is for you. If you've ever been reading a post and there's this horrid dark red text against the grey background, and you think to yourself, why does this hurt my eyes / why is this so ugly / can people choose a better color to read; this thread is for you. Or maybe this thread is for the offending party, who knows.

The point is that this thread is open to anyone and everyone who wants some insight and advice on how to create better visual designs, or even start their own visual designs. I'll try to not bore you with the principles of design theory, and instead focus on useful information that can be immediately utilized in your own thread designs or graphics.

Please do not post in this thread. If you have any questions or comments, my PM inbox is wide open. Feel free to say hello, ask me to cover a certain topic, or even tell me that I know nothing and that I should quit my profession. I probably won't respond to the latter, but you're free to voice what you think.

Thank you!

DISCLAIMER: I am not personally attacking anyone over their artistic choices in regards to their graphics or the way they visually present their content in threads. I am only sharing my knowledge in what would be considered best practice or current trends in digital design.

---

Table of Contents	Description
Getting Started	A look at design tools and how to choose the best one for you.
Design Resources	A compiled list of fonts, simpler image tools, and graphics packs.
Elements of Design	Breaking down what goes into design; what makes good design?
Choosing Images	Knowing the impact of images can be beneficial for graphics, avatars, and signatures.
Typography Part 1	A quick look into typefaces and what they portray.
Typography Part 2	The specifics of typography including leading, kerning/tracking and more.
Typography Part 3	Text readability for screens: color, size, alignment and more.
The Drop Shadow	The good, the bad, and the ugly of drop shadows. Learn how to use them.

[Chai]

CHOOSING YOUR DESIGN TOOLS

---

So you want to design your own stuff. Where do you start? An easy place would be choosing design software. It's the tool that allows you to manipulate and create images in varying formats. The important thing to remember here, however, is that tools are just that: tools. They don't substitute the actual skill and creativity of the designer, and you can create a beautiful piece of artwork regardless of the tool. I'm just going to list some design software (starting from paid to free) and the pros and cons of each.

Raster Graphics Editors

Raster graphics editors are pixel based editors. Think photo manipulation tools like Adobe Photoshop. It may be harder to resize things while maintaining the same quality. They're great for editing existing photos and graphics that you know are going to be a set size. It also gives you slightly more control if you want to edit an image pixel by pixel.

Adobe Photoshop ($20-$50/month)

Pros (+)

• Most commonly known design software
• Lots of learning resources online that can be easily followed
• A ton of different tools for all kinds of art purposes
• Has the most features out of everything on this list

Cons (-)

• Very expensive ($$$$); costs $50/month for the entire Adobe Creative Cloud, or $20/month for just Photoshop
• Has too many tools for a hobbyist designer that would ultimately be useless
• Requires some time dedication to learn all the functions

Affinity Photo ($49.99)

Pros (+)

• Mostly comparable to Photoshop
• Learning curve is supposedly smaller than Photoshop's
• Cheap design software but still very good quality

Cons (-)

• Costs money ($$); one time cost of $49.99 USD
• Doesn't come with every feature that Photoshop comes with
• Learning resources are limited

GIMP (Freeware)

Pros (+)

• Completely Free
• Does mostly what an amateur designer would want
• Has a decent amount of learning resources online

Cons (-)

• Complicated and unintuitive UI
• Not as comprehensive as Photoshop
• Complicated tasks take much more time to complete
• Learning curve is high due to UI layout

Photopea (Free-Browser Based)

Pros (+)

• Completely free
• Opens a variety of design files (.psd, .ai, .sketch and more)
• Comes with a majority of features that hobbyist designers would want
• Downloaded fonts show up in the fonts list
• Learning curve is so easy just by playing with it

Cons (-)

• Not as comprehensive as Photoshop
• Work area feels/looks small
• You can accidentally close the browser and lose your work

Pixlr Editor (Free-Browser Based)

Pros (+)

• Completely free
• Comes with most features that a hobbyist designer would want
• Downloaded fonts show up in the fonts list
• Easier to learn than Photoshop

Cons (-)

• Not as comprehensive as Photoshop
• Huge fucking ads take up screen space
• You can accidentally close the browser and lose your work

Vector Graphics Editors

Vector graphics editors are vector based editors, so it relies on mathematical algorithms to create lines and shapes. Because of this, you don't lose quality if the graphics are made bigger or smaller. The downside is that it doesn't offer the same photo manipulation that raster editors often do, but it's a good choice for illustrations and logos.

Adobe Illustrator ($20-$50/month)

Pros (+)

• Lots of learning resources online that can be easily followed
• Less intensive on memory than Photoshop
• A lot of different features for all kinds of art purposes

Cons (-)

• Very expensive ($$$$); costs $50/month for Adobe Creative Cloud, or just $20/month for Illustrator
• No image manipulation like with Photoshop
• A majority of the tools probably wouldn't be used by hobbyist designers

Affinity Designer ($49.99)

Pros (+)

• Combines raster and vector graphics (features of Photoshop and Illustrator in one program)
• Cheap design software but still very good quality
• Friendlier UI than Photoshop or Illustrator (in my own opinion)

Cons (-)

• Costs money ($$); one time cost of $49.99 USD
• Not as comprehensive as either Photoshop or Illustrator
• Learning resources are limited since it's newer software

Inkscape (Freeware)

Pros (+)

• Completely free
• Has a decent amount of learning resources on the Internet
• Comparable(ish) to Adobe Illustrator

Cons (-)

• Can't save files to .jpeg (though there's an extension for this)
• Missing some of the more advanced functions that are offered in Illustrator
• Inkscape UI looks really dated and can take some figuring out

---

In my own personal opinion, the tool does not make the designer, and more expensive tools do not equate to better designs. In fact, I would recommend against getting Adobe products for the amateur/hobbyist designer. DO NOT get them. They're so expensive, and I've always told people that if you're not getting paid for what you create, there is absolutely no sense in getting Adobe products. That being said, I do think the Affinity programs are great buys for the value. I've seen people create amazing stuff using them, and if you have the $50 USD lying around to spend on it, it would be a great tool to have.

Ultimately, the real standouts on this list (for me, at least), are Photopea and Pixlr Editor. I think these are your best bet for free design software. They're amazing browser-based image editing tools that offer most of what hobbyists would utilize. They definitely would be enough to create something beautiful to use as an avatar or signature, and would be more than enough to have attractive roleplaying graphics. Plus, they're free, and who doesn't like free shit?

Inkscape is fun if you want to try a vector based software. It may take some learning, but you'll find that with things you'd maybe want to resize (like custom logo text), it's much easier using vectors to resize, and you never lose quality. It's also fun if you want to use a simple image and give it a more illustrated feel by converting it to vector shapes.

[Chai]

A COMPILATION OF IMAGE RESOURCES, FONTS, AND GRAPHICS BUNDLES

---

Image Hosting

Name/Link	Description
Imgur	Common site with simple image editing tools.
Post Image	Straight forward image hosting site.
ImgBB	Scales well on mobile. (suggestion courtesy of @Hellion)

Image Editors (Resizing, GIF Editing, etc.)

Name/Link	Description
Adobe Spark	Free Adobe app that allows users to create simple graphics with text and filters. (suggestion courtesy of @Hellion)
Resize Image	Easy to use image editor that can edit GIFs very nicely.
Imgur: Video to GIF	Can create a GIF out of any video; very easy to use.

Fonts & Font Services

Name/Link	Description
1001 Free Fonts	A majority of the listed fonts are freeware.
DaFont	Includes fonts that are freeware, shareware, public domain or demo versions.
FreebiesBug Fonts	A smaller set of fonts but very, very attractive for graphic design.
Adobe Fonts	Only free to those with Adobe Creative Cloud subscriptions.

Royalty Free Images and Graphics Packs

Name/Link	Description
Unsplash	One of the best royalty free image sites. So many beautiful images.
Pexels	Also a good resource for free stock photos.
Pixabay	I don't think it's as good as the above two, but it has many beautiful choices.
FreePik	A lot of great graphics resources including images, icons, vectors, and PSD.
Design Bundles	Has paid and free options, but even the free content is well-designed.

[Chai]

BREAKING DOWN WHAT GOES INTO DESIGN

---

Art and design are two distinctly different fields but share (mostly) the same basic elements. Here we're going to take a look at those elements and discover how they can impact a piece of art or design. These elements are: line, shape, color, texture, space, size, and value.

Line

A line is any two connected points. They can be straight, wavy, solid or broken, thick or thin. They can be useful for dividing space or drawing attention to a specific area. Many lines together can create pattern.

Shape

A shape is any enclosed 2D space. It can be enclosed using line or color. There are geometric shapes (circle, square, triangle, etc.), natural shapes (leaves, animals, etc.), and abstracted shapes (graphical representations, stylizations, etc.). A lesser used shape can be used to attract attention.

Color

Self explanatory. Color can be used to create emphasis or put visual importance on something. It can also be used to create emotion or mood. Dark, muted colors convey something totally different than bright, vibrant colors.

Texture

Texture is the look or feel of the surface of something. Is it soft? Hard? Plastic and smooth, or fuzzy and furry? Paint splatters can even be a texture. Texture can be a good way to add visual interest.

Space

Space is an interesting part of art and design. It's the space between elements and can be used to show groupings of related items, or it can be used to create a pathway for the eyes to move through the design. It can also be used to define importance or to create perspective.

Size

Size is how big or small something is. You can use it to denote importance, create attention, or even to make visual interest through the contrast of big and small sizes. With text, you can create a visual hierarchy of information through size.

Value

Value is how light or dark an image, or part of an image, is. Value can be used to create pattern, depth, or emphasis. A gradient of value can lead the eye to a certain area.

---

Here's a nice infographic (that I did not create) that visually explains these elements: