Create Social Media branding assets for Backdrop CMS #121
Comments
|
@dariusgarza suggested we add some cool geometric shapes, like so: |
|
The scenery with balloons seems friendlier; Geometric shapes seem more in line with the Backdrop aesthetic. Would be nice if both @clickbox and @dariusgarza could produce their ideas then work together to build two official versions: a 'friendlier' one for marketing to The Average Joe, and a version for pitching to Technical Tom. Why not? |
|
Is it too late if I try to help? I need about a week to propose a project. I have many years of experience in the design of printed promotional materials and creating logos and may be able to figure something out. I will read again and think about mission and project vision and try to extract from them some graphic ideas. But I will need information about pixels dimensions and preferred color scheme - if any. |
|
hello @amilenkov, and no, it's certainly not too late to help! We would appreciate your involvement in this issue. Twitter banner images are 1500x500, so let's shoot for that size. I'm pasting in a sample of our working color palette (but these can be adjusted as necessary) |
|
I did one project and upload it now. I have a few more ideas and will develop further several projects with different designs, but I need a little more time, I'm overloaded with work now |
|
Take the time you need, we've been limping along with google-search images for the past year and another week or so is no problem. Thank you so much for working on these for us! Re the first upload, I like the use of the color palette, but I'm not 100% sold on the idea of using words in a background image. I think they may be too distracting from the rest of whatever else we have going on, and would love to see a option that was all or mostly imagery. I like the idea of geometric shapes from comment #2, but perhaps you already had that in mind and it will be coming in one of your next projects. :) I can't wait to see what's cooking! |
|
@jenlampton, are there vector versions of the dragon mascot for download? I see the press kit which has low-res images in the page but no vectors of the dragon in the zip file attached at the bottom. I may do a little playing around with this in between projects. |
|
Yes, I think the vectors are in our dropbox. I'll see if I can get those into the press kit as well. Thanks for pointing out that they were missing! :) |
|
@laryn I just posted a new press kit that includes the design files for all the black dragons :) https://backdropcms.org/presskit |
|
There are two links now at the bottom of that page. One points to https://backdropcms.org/files/Backdrop-Presskit.zip and the other to https://backdropcms.org/files/Backdrop-Presskit_0.zip |
|
On 18-Aug-16 22:32 PM, Jen Lampton wrote:
@jen, I downloaded and I reviewed all the files of all links that are there in https://backdropcms.org/presskit There are perfect vector files in AI and EPS file format -and some in Can I help anything? Antony Milenkov |
|
Here's an early first draft of a concept using a repeated Backdrop logo for the geometric background with Drop sitting in the foreground.
|
|
I love it!!! |
|
hm, looks like we need a larger version for youtube. I got an error saying it wasn't large enough, it needs to be at least 2048 px wide and 1152 pixels tall. (If other people have feedback we can of course iterate on this design, I just liked it so much more than what we have now I just thought we should put it up asap. We can change it later if it changes!) |
|
I made a few experimental compositions on this model. I'm going to do a few more, but let's take 1-2 days to look at it again. If you have ideas for improvement will help. The work files are vector-based, but will upload vector file when there is an approved project. Dimensions are 2560x1440 px & 1500x500 px.
|
|
Here's a quick resize of this version (had to rearrange somewhat, too, due to the different aspect ratio).
|
|
I like it better without the words, and actually with the green logo in the top left instead of black. Could we maybe get one without the dragon, for places where Drop would be sliced badly in the frame? Youtube is still problematic: https://www.youtube.com/c/backdropcmsorg @wesruv @dariusgarza does anyone else have feedback / thoughts / suggestions? I love them all! Thank you so much :) |
|
Here's a revised version with sizes 1500 x 500 pixels. If will upload and vector file if that project is OK. Or write what ideas you have for change and improvement. All colors are color combinations of primary colors in the Backdrop. I chose color tints that are brighter and vivid to contrast with the black Dragon. On the left there is a place for rectangular logo on YouTube / Twitter etc. I can do projects with other dimensions, but please write what kind of dimensions in pixels are needed exactly.
|
|
I think all we needed urgently were facebook, twitter, and youtube (see http://blog.hubspot.com/marketing/ultimate-guide-social-media-image-dimensions-infographic#sm.0001geb70xi00feiya62hz70vx76w) but I would love to get this added to our presskit so that others can use the colorful repeating backdrop for whatever they need, too! |
|
I upload PNG and Adobe Illustrator vector file for Facebook photo cover. This is final version with Facebook's standard dimensions and with better colors in background. https://www.facebook.com/help/125379114252045 Next few days as I have free time I will make and upload banners for other social networks. |
|
Here are PNG and Adobe Illustrator vector files for Twitter header. Depending on the width of the screen part of the picture is hidden so the Dragon is placed in the middle part of the image. |
|
Sorry I just noticed this thread - I'd like to remove the drop shadow on Drop, black shadow on black element always looks goofy to me. This might mean that we need to reduce contrast in the background. I think a geometric texture in the background could be really good, but I'd prefer it weren't our 'mark'. An easy update might be to make a diamond grid with some of the color variation. Lastly, the color and contrast of the background doesn't seem to have a pattern to it, I think if it had less contrast and variation, this might work out fine, but with the current visual dominance the places of high contrast are making for strange focal points. |
|
The idea for this design is not mine. I just drew as a vector file project, which was mentioned above and that Jen wrote that she likes it. In graphic arts is like in music – there are different styles and tastes. There is no one correct music. Some like rock, other folk music or jazz. Also there is NOT only one correct graphic design. There are countless - more or less suitable solutions. Depends on your taste and purpose. I like the bright and vibrant colors in the background because that way I perceive Backdrop CMS – cheerful, lively, responsive, full of life and creativity. Also I wanted the banner to attract strong attention in Twitter and Facebook. With bright colors of the background for black Dragon to stand out. Light black shadow on black Dragon is OK for me. It creates a third dimension in depth, moves the Dragon in the foreground. Black objects in nature also have shadows. The shadow is a problem with a dark and especially black background, but this is not the case here. I also uploaded vector Illustrator files for Facebook and Twitter. All objects there are in layers and editable. Anyone can edit and change the background pattern and colors in these files, to remove the shadow and to propose other projects. |
|
Greetings amilenkov, Nice job with the vibrant colors. Theyre very saturated, and stimulating, yet harmonious. I see why you added the shadow here, but it looks a bit artificial. I would either remove the effect, or do something that mimics nature more. Thanks for helping support backdrop design! Really excited by what we have thus far. Cheers, d. |
|
@wesruv, @dariusgarza me non-artistic-minded brute just came out of my cave. Me thinks all this artsy-craftsy lingo makes head dizzy. Please upload your ideas in a form that I can eat ...err see and compare I meant 😄 |
|
Hey @gregory I'm sorry your having trouble understanding our objective It's not as easy as it seems to give design feedback. I'm not merely If your trying to say that I should do it myself...well I wish I could, but Instead of picking apart our vernacular, how about offering some advice, or On Aug 29, 2016 8:57 AM, "Gregory Netsas" [email protected] wrote:
|
No no, you got me wrong. Your "Fortunately you're not the designer..." comment sums up what I wanted to say. I simply do not understand what you are saying until I actually see a version of the designs with your changes implemented so that I can compare. Even then, my feedback would simply be something like "Yeah, I like that better." or "Nah, still think that the first design looks better", but I would honestly not be able to justify why. In fact my comment would most likely be "I like both. Lets go with whichever". |
|
...to put it in simple terms with an example that others might understand: if you had master chefs or food critics on one side and me on the other and asked all of us to taste a gourmet dinner and then to provide comments/feedback, they most likely would be chattering on for hours about the ingredients they were able to detect with their super-sensitive pallets and the combination of flavors and the texture, while I'd simply be either "Yum!" or "Blahh" 😄 So, I all meant to say by "me non-artistic-minded brute just came out of my cave" was that I am not an artistic person and I cannot imagine the changes you are proposing until someone (either you, or the original designer, or someone else) implements them in something that I can actually see. Till then your "master artist" lingo of "Theyre very saturated, and stimulating, yet harmonious." seems like alien talk to me. Something equivalent of when Sheldon Lee Cooper, Ph.D., Sc.D. comments on something... most people can get an idea of whether he approves or disapproves of it, but they simply did not understand what he just said 😄 |
Here's what Saturation means @klonos It's not fair to trivialize the discussion by saying it's too "artsy" because you don't have a fundamental understanding of design. We're all here to help each other learn things, but don't expect people to spoon feed you information either. I'm not a developer by trade, so I often have to ask for clarification, or research things that people are discussing to understand them better. Saying things like "master artist lingo" is condescending and not a constructive way to give feedback or ask for help. |
|
@wesruv and @dariusgarza thank you for your feedback. Both comments are very thought out and add value to this conversation! @amilenkov thank you also for your time and work on the current image, I do like it, and it is a lot better than what we had before (something I just grabbed from a google image search!). The reason I asked for feedback from @wesruv and @dariusgarza is because they have a much better understanding design, image composition, and how to provide feedback that's a lot more valuable than my "I LOVE IT!!!" :) Though I too may not understand how to take their suggestions and implement them, fortunately there are people in this thread with those skills. @klonos your post did come across as a bit harsh - even to me - and I know you pretty well. I know you didn't intend to be condescending, but in this world where all we have to communicate with each other (online) are words in a post, some extra care is often necessary. (and boy have I learned that the hard way!) I would also like to see some iterations on the current design with suggestions from @darius and @wesruv taken into account, but thanks to all the great work @amilenkov has done, and the provided layered documents provided, those changes can be implemented by anyone with the time & desire to do so. We are off to a great start, and thus, not in any rush to iterate. Should someone want to move this thread forward we have some great feedback and new directions to try, and the assets available to do so. |
|
@jenlampton you are right. Thank you. I'm not a designer with high academic education. I have a university degree in philosophy not in graphic design, mathematics or programming. Only yesterday from this discussion I learned that there exist "fractals" and read a few articles on the Internet to get an idea what it is. I am self-educated practitioner with many years of work in book design, print advertising and more recently, websites. I proposed these projects ONLY because I saw many months in this topic there was no proposed suitable project. I know from my experience that the best professional designers are scarce elite, but the practical needs of real people are immeasurably greater than professional designer's capacity and I believe this gives people like me the right to do our work. I know that my projects are not perfect, but I know also that I worked thoroughly and carefully and I hope they are better than nothing. I will be glad if these projects are useful for now and I will be glad when my projects will be replaced by better and more professional ones. |
"Saturation is the colorfulness of a color relative to its own brightness. Though the general concept is intuitive, terms such as chroma, saturation, purity, and intensity are often used without great precision, and even when well-defined depend greatly on the specific color model in use." So, you honestly expect the average person (me in the context of art and design) to understand all that? ..."the colorfulness of a color"?? I understand that you understand all that and I also respect that it is important and interesting to you, but for me ... WTF?!, plain English please? It's way beyond me and I need pictures in order to understand.
That was meant to be a playful pun, as in "master-chef" (the show) - not to offend anybody. When people talk about food there, I understand that they are passionate about it, but I still don't get what they are talking about. I just either like the show and the food or not. Anyways, it seems like, as @jenlampton said, the more words I use, the worse I might make the situation, so here's the bottom line: I saw a design, I liked it better than what we have currently, I then saw some comments that honestly did not make sense to me (that is entirely my problem - nothing to do with the comments), I then made a request for people to visualize their suggestions so that I can understand what they are talking about, I then got a comment saying that I offended not just a person, but an entire group of people? WOW. I am sorry that I came off that way. It was not my intention. Perhaps lost in translation? I don't know what else to say. @dariusgarza if you still feel offended, please feel free to PM me. Lets not drag this issue OT. |
|
...btw, using google image search to search for "saturation" made me realize that what you must be talking about is that the colors should be less vivid/bright or something. Right? So, the designs by @laryn instead of the latest ones by @amilenkov Right? |
|
...I believe also "pastel" colors is a term used. ...or "pale"? |
|
I have just seen the new image used for the 'cover photo' in Backdrop's facebook page - it looks great! |
|
Here are the files for YouTube. |
|
Thanks @amilenkov, unfortunately I'm getting an error from YouTube saying that the image needs to be at least 2048px wide and 1152 pixels tall. |
|
OK, I found the instructions and template for making here: The problem lies in the need to have a large size for TV displays, besides computers, mobile devices and tablets. So the height becomes much bigger than the banner for Facebook and Twitter and I have to figure out how to fill it. I'm going to work on this the next few days, but if anyone gives ideas, i'il be grateful. |
|
I'll take a look if u post the design file
…On Aug 15, 2017 12:45 PM, "Antony Milenkov" ***@***.***> wrote:
OK, I found the instructions and template for making here:
https://support.google.com/youtube/answer/2972003?hl=en
[image: channel-art-template]
<https://user-images.githubusercontent.com/14857883/29332945-8ab0d394-820a-11e7-9dc7-1e4fc530c66d.gif>
The problem lies in the need to have a large size for TV displays, besides
computers, mobile devices and tablets. So the height becomes much bigger
than the banner for Facebook and Twitter and I have to figure out how to
fill it. I'm going to work on this the next few days, but if anyone gives
ideas, i'il be grateful.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#121 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AGt2a1SXmiszzQpPE_0dDuB2hBMJQZtVks5sYfU8gaJpZM4Gl2Oe>
.
|
|
What do you think about this project? When the final project is approved (test it in YouTube with devices with different screen sizes), I will upload also final vector file.
|
|
Was going to help u with the crops, but need the vectors. Nevermind if
you're doing it.
Is that the design for the YouTube banner? I like the black contrasted with
the colors. Don't think you need the qr code tho considering users will
already be online when viewing it.
…On Aug 16, 2017 8:38 AM, "Antony Milenkov" ***@***.***> wrote:
What do you think about this project? When the final project is approved
(test it in YouTube of devices with different screen sizes), I will upload
also final vector file.
[image: youtube_2560x1440]
<https://user-images.githubusercontent.com/14857883/29371788-f61125e2-82b1-11e7-9010-18935acebafc.png>
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#121 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AGt2a68uSpQHZqQJQt3hNnX5theBLE73ks5sYwzggaJpZM4Gl2Oe>
.
|
|
I like the use of color!
…On Wed, Aug 16, 2017 at 11:38 AM, Antony Milenkov ***@***.***> wrote:
What do you think about this project? When the final project is approved
(test it in YouTube of devices with different screen sizes), I will upload
also final vector file.
[image: youtube_2560x1440]
<https://user-images.githubusercontent.com/14857883/29371788-f61125e2-82b1-11e7-9010-18935acebafc.png>
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
<#121 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AAoUQdhL-zn2NKFiaUEMP2MqNzQ4HdcEks5sYwzfgaJpZM4Gl2Oe>
.
|
|
It looks like some of the background shapes are not perfect squares and got
squished maybe? Since they are derived from the logo, it's better to stick
to the same square proportions.
…On Aug 16, 2017 9:18 AM, "Tom Grandy" ***@***.***> wrote:
I like the use of color!
On Wed, Aug 16, 2017 at 11:38 AM, Antony Milenkov <
***@***.***>
wrote:
> What do you think about this project? When the final project is approved
> (test it in YouTube of devices with different screen sizes), I will
upload
> also final vector file.
>
> [image: youtube_2560x1440]
> <https://user-images.githubusercontent.com/14857883/29371788-f61125e2-
82b1-11e7-9010-18935acebafc.png>
>
> —
> You are receiving this because you are subscribed to this thread.
> Reply to this email directly, view it on GitHub
> <https://github.com/backdrop-ops/backdropcms.org/issues/
121#issuecomment-322811917>,
> or mute the thread
> <https://github.com/notifications/unsubscribe-auth/AAoUQdhL-
zn2NKFiaUEMP2MqNzQ4HdcEks5sYwzfgaJpZM4Gl2Oe>
> .
>
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#121 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AGt2a8tsYENOhlG_wSEU_RJP8_Hcqshhks5sYxZGgaJpZM4Gl2Oe>
.
|
|
The central color zone should be visible on computers, tablets and mobile devices, they should not see the black background. The black background is visible only on TV devices, only they will also see the QR code. I guess it would be convenient for a visitors to the YouTube page from a TV device to scan the QR code to enter the site's address in their mobile phone, but you decide better. The design of the color zone is not arbitrary, but similar to the banners for Facebook and Tuiter. |
|
I do not have much experience with banners for YouTube, I have done banners for YouTube a while ago, but then there were no such requirements for TV size and I can not test it because I have no internet TV device. The dimensions are according to Google's instructions, I expect to work, but if you want to change something I'll upload a vector file for processing with illustrator. |
|
Thanks for the file @amilenkov! It looks like on computers we can see a black and white stripe on both the top and the bottom of our image: https://www.youtube.com/user/backdropcms I agree with @dariusgarza that it would be great if we could stick to our brand and keep the logo mark proportional. We should probably do that everywhere we use it, so we may need to update youtube, facebook, & twitter to match. But we may need to update them to match after we make these changes to youtube anyway :) @dariusgarza I believe there was also some concern about the drop-shadow on the dragon previously in this thread, do you think that is off-brand, or is it okay in this instance? I don't mind it myself, but I figured maybe we should ask our Backdrop brand expert :) |
jenlampton
changed the title
Backdrop could use some consistent online brand imagery. We need background / header images for facebook / twitter / youtube / google +
Do we have any designers who want to pitch something that matches our mission and project vision?
The text was updated successfully, but these errors were encountered: