Build a Cover Image

Capitol 360 Innovation Center Hackathon Guide
Search…
Build a Cover Image
In this example we'll take a performance image and create a cover image. Here we have the amazing Jazz artist, Wayne Shorter - image copyright and courtesy of Capitol Music Group.
Beautifully cropped square image, but to make it a cover image we need the image to fit into a 16:9 aspect ratio. We will need to pad the image to make up the image fit into the new aspect ratio. First step is to example the direction the performer's eyes are gazing. Wayne is looking to the left so let's add lead space and pad the image to the left.
1
http://res.cloudinary.com/capitol-music-group/image/upload/
2
ar_16:9,c_lpad,g_east/v1526606182/wayne-shorter/speak-no-evil/WSHORW12.jpg
Copied!
We added aspect ratio of 16:9, cropping of lpad and gravity east to create the image and move it to the right. This done simply by adding the params into the url as follows:
1
ar_16:9,c_lpad,g_east
Copied!
Nice but would it be better if the background color matched the exact same color as the backgound in our original? Easy! Just add background auto to our url:
1
b_auto
Copied!
1
http://res.cloudinary.com/capitol-music-group/image/upload/
2
ar_16:9,b_auto,c_lpad,g_east/v1526606182/wayne-shorter/speak-no-evil/WSHORW12.jpg
Copied!
Looking good! Now lets optimize this for performance and quality.
We can optimize the dpi, format, and quality with a few additional params in our url:
1
dpr_auto,f_auto,q_auto:best
Copied!
The addition of these params will improve performance and delivery of the final image tremendously, In general you should always use them.
1
http://res.cloudinary.com/capitol-music-group/image/upload/
2
ar_16:9,b_auto,c_lpad,dpr_auto,f_auto,g_east,q_auto:best/
3
w_1600/v1526606182/wayne-shorter/speak-no-evil/WSHORW12
Copied!
You'll notice we also added a width param: w_1600 - You'd set this to fit the image into a explicit layout size, if you omit it you'll get the original image size. The example here were set at a width of 600 to fit nicely in the layout.
Our cover image allready looks awesome, but let add a artistic filter to enhance the black and white image. Adding the effect param with a named filter is how we do it.
1
e_art:red_rock
Copied!
Nice vibe! You can almost hear Wayne's smooth jazz sounds. We have dozens of artistic filters, text and image overlays to experiment with and make that cover image pop.
Add some text:
1
http://res.cloudinary.com/capitol-music-group/image/upload/
2
ar_16:9,b_auto,c_lpad,dpr_1.0,e_art:red_rock,g_east,q_auto:best/
3
c_scale,fl_relative,w_0.3,g_west,
4
l_overlays:4194-wayne-shorter-speak-no-evil-mm-cover-1900-ljc,x_0.05,a_-20/
5
l_text:roboto_155_stroke_center_line_spacing_-10:Speak%20No%20Evil,
6
co_white,bo_5px_solid_black,g_north_west,x_400,y_80,w_580,c_fit/
7
l_text:impact_55_stroke_center_line_spacing_-10:Wayne%20Shorter,co_white,bo_
8
5px_solid_white/c_scale,w_600/wayne-shorter/speak-no-evil/WSHORW12.jpg
Copied!
Variations
1
http://res.cloudinary.com/capitol-music-group/image/upload/
2
ar_16:9,
3
b_auto,e_gradient_fade:symmetric_pad,x_0.2,
4
c_pad,f_auto,g_east,q_auto/v1526782137/
5
blue-note/wayne-shorter/MI0001444348.jpg.jpg
Copied!
This variation pulls in the background color and eases in the transition with gradient fade:
1
b_auto,e_gradient_fade:symmetric_pad,x_0.2
Copied!
Here we use the gradient fade to transition the background to white:
1
http://res.cloudinary.com/capitol-music-group/image/upload
2
ar_16:9,
3
b_white,
4
e_gradient_fade:symmetric_pad,x_0.2,c_pad,f_auto,g_east,q_auto/
5
v1526782137/blue-note/wayne-shorter/MI0001444348.jpg.jpg
Copied!
You can also have the that gradient fade into transparency to reveal the background; remember to change the format extension to png.
1
http://res.cloudinary.com/capitol-music-group/image/upload/
2
ar_16:9,b_transparent,e_gradient_fade:symmetric_pad,x_0.2,
3
c_pad,f_auto,g_east,q_auto
4
/v1526782137/blue-note/wayne-shorter/MI0001444348.jpg
5
.png
Copied!
Now see how this technique might look on a web page with an interesting background:
Thought Starters - Previous
Interactive Lyrics Page
Next - Cloudinary
Video Transcoding
Last modified 3yr ago
Copy link
Contents
Variations