DEV Community

Cover image for Day 03: Graphic Design from a novice.
Kurtiss Frost
Kurtiss Frost

Posted on

Day 03: Graphic Design from a novice.

Total Word Count - 494

Day 3 of my writing challenge. Today was a hard day to have time to gather my thoughts to even begin writing about something. I have no idea where to even begin.

One of my favorite things to do is to make and create graphics. I have always enjoyed doing them. So today, I thought I would try to talk about my process on how I go about making graphics.

First off, let me say, I am in no way an expert. I am still learning. So, what does the process look like when I want to make a graphic?


What's it for?

First thing I have to do is figure out what the project is that I am making the graphics for. Sometimes I will just make things because I have a cool idea I want to try out. But for this example, we'll use the banners I make for my dev.to post.

The first thing I did was figure out the maximum dimensions that a banner could be (1000 x 420). Then I went into photoshop and made a 1000x420 project with a transparent background.


The design

Now that I had my blank template, I began thinking about the theme. I don't know if you've noticed but, my banners tend to follow the same design pattern.

breakdown

I start by selecting an appropriate background image for the topic of the article. Then I scale and/or crop it to fit the earlier mentioned dimensions.

Then I have a 1000x420 black rectangle overlaid on top of the image. I set the opacity for that to 40%. This way I can overlay text over the image and it won't clash as much. Sometimes overlaying text over an image, the text is hard to read. So I added this black rectangle on top to dial back the background image just a bit.

After that, I have another 1000c420 rectangle on top of everything. Instead of doing a fill for this one, I set the fill to be transparent and set it to have a stroke of 6px. Using the properties button while having the rectangle selected, allows me to leave it on top and just change the color as needed.

Finally, I put text on top of everything. Here recently, I have just made everything be white text with a black stroke of 3px and a drop shadow and that's pretty much it!

breakdown 2


Conclusion

So that's basically my design process for my dev.to banners. I am currently thinking about re-designing them. I'm not 100% on this yet. I'll really have to think about what I would want to do with them. So, for the time being, I am just going to stick with what I am using now and worry about the new ones whenever I come up with a decent idea.

Anyway, that's going to be it for today. I appreciate you reading the mad ramblings of a graphic design scrub. Have a wonderful day!

signature

Top comments (0)