1. Home
  2. Articles & Guides

Designing Aesthetic | Tips, Principles, and More

Hidden 5 yrs ago → 5 yrs ago Post by Chai
Raw —
OP
Avatar of Chai

Chai I'm Baby™ (She/Her)

Member Seen 2 yrs ago


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 ContentsDescription
Getting StartedA look at design tools and how to choose the best one for you.
Design ResourcesA compiled list of fonts, simpler image tools, and graphics packs.
Elements of DesignBreaking down what goes into design; what makes good design?
Choosing ImagesKnowing the impact of images can be beneficial for graphics, avatars, and signatures.
Typography Part 1A quick look into typefaces and what they portray.
Typography Part 2The specifics of typography including leading, kerning/tracking and more.
Typography Part 3Text readability for screens: color, size, alignment and more.
The Drop ShadowThe good, the bad, and the ugly of drop shadows. Learn how to use them.
8x Like Like 3x Thank Thank
Hidden 5 yrs ago → 5 yrs ago Post by Chai
Raw —
OP
Avatar of Chai

Chai I'm Baby™ (She/Her)

Member Seen 2 yrs ago


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.
3x Like Like 1x Thank Thank
Hidden 5 yrs ago → 5 yrs ago Post by Chai
Raw —
OP
Avatar of Chai

Chai I'm Baby™ (She/Her)

Member Seen 2 yrs ago


A COMPILATION OF IMAGE RESOURCES, FONTS, AND GRAPHICS BUNDLES



Image Hosting

Name/LinkDescription
ImgurCommon site with simple image editing tools.
Post ImageStraight forward image hosting site.
ImgBBScales well on mobile.
(suggestion courtesy of @Hellion)
Image Editors (Resizing, GIF Editing, etc.)

Name/LinkDescription
Adobe SparkFree Adobe app that allows users to create simple graphics with text and filters.
(suggestion courtesy of @Hellion)
Resize ImageEasy to use image editor that can edit GIFs very nicely.
Imgur: Video to GIFCan create a GIF out of any video; very easy to use.
Fonts & Font Services

Name/LinkDescription
1001 Free FontsA majority of the listed fonts are freeware.
DaFontIncludes fonts that are freeware, shareware, public domain or demo versions.
FreebiesBug FontsA smaller set of fonts but very, very attractive for graphic design.
Adobe FontsOnly free to those with Adobe Creative Cloud subscriptions.
Royalty Free Images and Graphics Packs

Name/LinkDescription
UnsplashOne of the best royalty free image sites. So many beautiful images.
PexelsAlso a good resource for free stock photos.
PixabayI don't think it's as good as the above two, but it has many beautiful choices.
FreePikA lot of great graphics resources including images, icons, vectors, and PSD.
Design BundlesHas paid and free options, but even the free content is well-designed.
3x Like Like 1x Thank Thank
Hidden 5 yrs ago → 5 yrs ago Post by Chai
Raw —
OP
Avatar of Chai

Chai I'm Baby™ (She/Her)

Member Seen 2 yrs ago


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:

3x Like Like
↑ Top
© 2007-2024
BBCode Cheatsheet