#qcensus2018 Campaign - Graphics Breakdown

in utopian-io •  2 months ago

Repository

https://github.com/nothingismagick/qcensus2018

Graphics breakdown

Task Request

This task was indirectly given to me by Razvan Stoenescu, who is the owner of the Quasar Framework project. I am the team member who is leading the Art Department at Quasar and am thereby within my rights (and duties) to find my own tasks. I budgeted 4 hours for production, 1 hour for revision and 1 hour for documentation.

Requirements

Make an eye-catching poster image for the @quasarframework #qcensus2018 campaign for Steem and Twitter [edit: just added Medium to that list too] that uses the current Quasar logo, a robot, the #qcensus2018 hashtag and make it look "aged" but "sci-fi". It must be creative-commons licensed, use the font Noto Sans and be a png.

Details

Result

final result

Proof of Authorship

I looked through my robot archive, and was inspired to take one that looked like it was working on a portal - I knew immediately that I would put the quasar logo in the portal. I will probably use the other "zeroids" from the same art asset to make further work. This was my first mockup:
mockup

I did some stamping, blurring and added some glow effects (to the console and the portal). I also changed the ratio of the dimensions to make it look better as a final asset.
stamp and blur

I placed the Quasar logos and perspective transformed them, using transparency for effect (but also to help with alignment). This is one of the only challenging parts of this project, because doing perspective transformation really requires that you think in three dimensions. I am pretty happy with it (and it was easier and faster than building a 3D model in blender and then mapping it...)
transformation of logos

In order to mask the pixelation of the original robot image, I added a parchment layer that I gaussian blurred at 0.2% and used a 50% Hard Light Layer blend effect.
parchment

Then I took the ESA image of the quasar, morphed and placed so that it would seem like it was coming out of the portal. I needed to do quite a bit of cleanup, transparency and blending. Ultimately I removed the tail of the quasar, because it was visually hard to read.
a real quasar

After quite a bit of deliberation, I placed the text as you see it here. In case you are wondering, it is three (actually four) different weights of Noto Sans, which is the new font that the Quasar Art Department has decided upon, and this project gave me the opportunity to testdrive it. Of special note is the Q => it is U+03d8 (Greek Letter Archaic Koppa). It had to be stretched and resized to fit.
text

I noticed that there could be a little more reddish glow behind the robot so I painted it in as a Colour layer, and then I added the Steem logo and the credits.
glow steem and credits

Asset provenance:

This is the citation I used as a watermark in the file:

Quasar image by ESA / Robot from theoldrobots.com / design and collage by @nothingismagick / CC BY 4.0

Robot Picture

link

Quote from their page: http://www.theoldrobots.com/disclaimer.html

You cannot use the files for commercial use such as selling, advertising or monetary transactions. These files and pictures are free, you may use them, give them away, you cannot claim ownership restrict or sell them. When used, you must acknowledge from where the files originated.

Because the #qcensus2018 campaign is for a non-profit organisation and is not selling any services or advertising for a product, we feel that this use is acceptable considering it is about bringing the community together.

Steem logo:

duckduckgo.com search: https://preview.tinyurl.com/yb9zfsxq

Twitter logo:

Logo download from wikipedia

Medium logo:

https://medium.design/logos-and-brand-guidelines-f1a01a733592

Font:

Unmodified Google Noto Sans; font-weights black, condensed, light, available in the repo. It is licensed under SIL.

Quasar Logo:

Quasar project asset, usage requires signed FLA, which I have done and made written confirmation of in the documentary repository.

Quasar burst image:

link
SpaceTelescope is a site run by esa, which is a tax-funded international agency.
https://spacetelescope.org/copyright/

Parchment image:

https://tineye.com/search/87415fa1d41c1b57087bd2a2e55600e2b7e0d72a/?sort=crawl_date&order=asc

Tools used

The final png asset was made start to finish with a licensed version of Affinity Photo 1.6.7 on a Mac and colour-proofed on a iPad Pro 9.7" connected via Duet. The entire file history is included in the larger afphoto file, should you want a playback.

To make the screenshots for this doc, I used the native screen-capture from Mac. (shift-command 4)

Original files

Original artboards can be inspected at
https://github.com/nothingismagick/qcensus2018/tree/master/artboards

Attention: the .psd is merely exported, and the quality is likely to be very shoddy. Complain to Adobe about that. ;)

Proof of Work Done

https://github.com/nothingismagick

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Thank you for your contribution.

  • I really like the way you toned the entire banner into the same old paper color.
  • Im not sure why are "onSteem" and "onMedium" words together. Is it part of the brand?
  • I would consider making texts a bit bigger to stand out in the steemit feed.
  • tineye link is not working

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

·

Thank you for your review, @andrejcibik!

So far this week you've reviewed 3 contributions. Keep up the good work!

Hey @nothingismagick
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Great one! I liked the final outcome, I believe that the layer really works for this specific project :)

It was joyful to read step by step creation. There is one thing caught my eye tho, where you expand the robot background and the part between the overlay. I wonder if that shinier thin line was intentional.
And I'd like hear more about color proofing on an ipad. I have a non ips screen unfortunately :facepalm:, I did a little search after I read this post but couldn't find anything related. Is there any article or tutorial that you can forward.

·

Hi @oups - first of all, yes - the "shinier line" became intentional. At first it was an artefact - but I liked it immediately. This is what Bob Ross would call a "happy accident". I never once thought to remove it, but I did look at it more than a few times, and it was actually what I used as my "visual anchor" to track the gradient and texture overlay in the sense that it helped my see more clearly. I could have removed it, but that type of "bright spot" had the added effect of psychologically dimming the rest of the already very bright composition.

As far as proofing goes, I am planning on publishing a series of "best-practice" articles about things like color-balance etc. where I will discuss this in great detail. Until then I can explain it for you: I actually use three monitors. One of them is 1920x1080, and it is my general workspace that is a bit more "contrasty" than normal, which forces me to be careful with oversaturation. Then I have another monitor rotated 90° - this allows me to see subtle pixel artefacts by merely moving to the left and right. Finally the iPad pro. With its P3 display, it actually has a colour gamut that is very close to the way things appear in the "real" world of light. By looking at my work on the iPad, I see how it will appear "in the most optimal situation". The other two monitors serve as screens that provide two different "colorimetric interpretations", and by moving the piece between the monitors I am able to find a happy medium.

·
·

"psychologically dimming the rest of the already very bright composition." makes perfect sense, I would probably try hard to expand that robot background as realistic as possible and apply that overlay straight. It's nice to know behind the scenes. Thanks for answering my questions, I should take more time on ipad.

Razvan Stoenescu ... that sounds definitely Romanian. Is he on steem by any chance ?

·

@sorin.cristescu - He is Romanian, but you are unlikely to find him here as I am the one managing the official steem channel. However, if you want to find him, you will find him occasionally on our Discord: http://chat.quasar-framework.org

·
·

Thank you very much, I took up the invitation and I've also invited him to connect on LinkedIn (don't know if he's often there though)