Cover image for your contributions at Utopian-io

Words
500
Reading
3 min
Listen
Play
9y

image.png

A cover image is very important for most (maybe each) of your posts; because as I have read at many "How I choose how to curate" posts from whales and curators, many of them say the first thing they look at is the cover image, that's the thing that brings the attetion from your contribution and makes it stand in front other posts.

So, this time I am going to give you a pack of design with a nice cover image you can use on your posts or contributions to UTOPIAN.IO. I hope this helps you get more attention and, of course, more support from the community.

If you want to go direct to download the PSD and JPG files you can click here. But if you want the details of how I made the designs and get to know how to change it to your convenience, keep reading.

How I made it

First I looked for a nice picture of a city with a person looking to it from a high place. It can't believe how easy to find it was at pexels.com.

image.png

Then I made a new file in Photoshop, making sure to meet the aspect ratio needed, for that I just copied the dimensions of the image elear@elear uses for his posts. Which is 1366x729px. Make sure the file is going to have 72px of resolution, because that enough for web images design.

image.png

After that I pasted the image to my canvas and added the Inner glow style as shown below, using the blue of the logo (#4b7dc0):

image.png

Then I aded a rectangle with the magenta color of the logo (#9c3493) and styled it as you can see:

image.png

So our image now looks like this:

image.png

Now it is time to add the UTOPIAN.IO logo, because that's what we are mean to design for. I just dropped the logo with the gradient. Because I was going to change all the color and effects.

image.png

Giving it a little style now it looks like this:
image.png

Finally, for this first design, I just added the word UTOPIAN-IO using Roboto black font, which can be found at google fonts.

This is the final result:

image.png

As you could see in the cover for this contribution, I also made a version with the title or whatever you want to write on it. And also a blue version.

How to change the main image

That is very easy. Just open the PSD file and drop over the main image the one you want to use as you can see here:

image.png

I took again an image from pexels to make this example:

image.png

This design effects work better with a background image that is a bit dark and desaturated.

I hope you like this contribution but most important, I hope this is usefull and helps you get more attention.

CLICK HERE TO GET THE PSD AND JPG FILES.


You can find me here { | | }



Posted on Utopian.io - Rewarding Open Source Contributors

Cover image for your contributions at Utopian-io | Ecency