Blog design pack for @utopian-io

Repository

https://github.com/utopian-io/utopian.io

Linked Task Request

https://steemit.com/utopian-io/@utopian.tasks/calling-designers-make-our-blog-gorgeous-and-get-an-upvote-and-bounty

@utopian-io asked in a Task Request for a pack of design for their blog; it must include the following:

• Utopian weekly (banner)
• Utopian magazine (banner)
• People of utopian (banner)
• Open Source Radio Show (banner)
• Updates (banner)
• As well as dividers and more.

These designs should include variations, use utopian logo and the mascot (if necessary).

---

For this task I designed this main banner idea:

^{Banner in real size to appreciate all details}

This design was made having in mind a PNG file; with this design the colors of the banner change if you toggle night mode to light and dark, preserving legibility and making in more dynamic.

But Utopian task asked for JPG, so I created the following variations:

Transparent	Light	Dark

As you can see, light and dark versions don't have rounded corners. I took Utopian magazine as main design, and based on that I just changed the title on each to create the rest of the banners, but I also decided to create an extra variation with the shape for the rest of them:

Utopian weekly

Transparent	Light	Dark

People of Utopian

Transparent	Light	Dark

Open source radio show

Transparent	Light	Dark

Utopian updates

Transparent	Light	Dark

All the files above are in the right size ready to use.

---

The task also asked for separators, so here are the ones I designed:

Transparent	JPG

---

As extra design asset I created a button, using the mascot and inviting to join the discord server:

Transparent	JPG

Don't hesitate to turn on and off the nigh mode to check the transparencies.

---

Benefits / Improvements

This design will help Utopian have a more attractive cover for each post with the desired topic. I gave enough variations hoping utopian team considers the PNG for even more dynamism. In case not, anyways I provide an exclusive design for each cover changing the main shape (square, triangle, circle, etc).

Mockups

Banner light mode	Banner dark mode
Thumbnail light mode	Thumbnail dark mode

^{Consider the thumbnail size is reduced in this mockups}

---

Proof of authorship

I started the design with a background with utopian colors as gradient. Then added a layer with color half-tone effect and duplicated it. After that, added some shapes to resemble current utopian profile pic more. The final touches were utopian logo, some circles with a mask to show only a part of their shadow, the main shapes (square, circle, hexagon, etc) and the proper title.

Tools

I used only Adobe Photoshop CS6 to design all the banners, separators and buttons. I took official Utopian logo from their google drive folder as well as the mascot.

^{Photoshop screenshot}

All the layers can be edited, grouped or ungroup if necessary.

---

Final details

Original files	Google drive folder
Font used	Lato. Open font
	Licensed under a Creative Commons Attribution NonCommercial 4.0 International.
Proof of work done	https://github.com/fabiyamada