Cover image for your contributions at Utopian-iosteemCreated with Sketch.

in #utopian-io8 years ago

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 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

Sort:  

Great explanation, very well designed!
Keep up the good work, resteemed.

Thank you so much!!!! :D

Hey @fabiyamada I am @utopian-io. I have just super-voted you at 3% Power!

Achievements

  • Creativity makes the World a better place. Thanks!
  • Much more informative than others in this category. Good job!
    Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

That was fast! Thank you very much! :D

good post, follow me back

I checked you blog and I don't even know what language you speak :s

Coin Marketplace

STEEM 0.12
TRX 0.34
JST 0.033
BTC 113030.30
ETH 4195.72
USDT 1.00
SBD 0.87