Stylus: promotional tile images & YouTube video

[schomery]

We need the following images for the WebStore

1. Small tile - 440x280
2. Large tile - 920x680
3. Marquee - 1400x560

Also it would be nice to have a short tutorial for both WebStore and FAQs page.

[narcolepticinsomniac]

I've got some tentative commitments from a couple different people for tutorials. One for a pictorial/text version and one for a video. The person who agreed to do the video has done one for Stylish previously that was good. Not making any guarantees, but hopefully they'll both pan out soon.

As far as the images for the WebStore, those are fairly large, so what is the general idea for their content?

[narcolepticinsomniac]

Like I mentioned, I got another us.o member to make a video tutorial, and he just sent me the link:
https://www.youtube.com/watch?v=fCVvGwoF5cQ
He had done one previously for Stylish which was pretty long, so I gave him a list of stuff to cover, and asked him to keep it under 10 mins. He covered it all pretty well and stuck to the time frame. If you're curious about basic functionality and style creation, I don't think it'll feel long at all. IMO, it'd make a fine default tutorial vid for the project.

@schomery @tophf
Thoughts?

[schomery]

Thanks @narcolepticinsomniac. The tutorial looks great. I added it to both FAQs page and Chrome WebStore.

[schomery]

As far as the images for the WebStore, those are fairly large, so what is the general idea for their content?

@narcolepticinsomniac see https://developer.chrome.com/webstore/images#promo

[narcolepticinsomniac]

Cool. His branding is already in the vid, but it'd be nice to give him a shout-out, like under the embedded vid. something like "Stylus tutorial courtesy of DestructiveBurn @cyberationmicro.com".

I'm still not much clearer on what the promo images should be of. Stylish has mostly screenshots with text that basically says nothing. I suppose it'd be good to have some side by sides of boring sites next to the same sites with some flashy styles applied. Other than that I see like, logos worked into some colorful graphic backgrounds with some generic phrases of endless possibilities. Am I on the right track?

[d3n1c1d3]

TL;DR (to long did not read)

maybe the creator of the video can add the ability that the crowd can add subtitles and or even translated subtitles for the video.

---

I am just switching to this topic, but it is just a simple thing. and lastly I am where interested into sign language. so this topic pops up in my head first.

subtitles are nowadays where important for me. everything is realy simpler if you can access subtitles, for example you do not understand the speaker or you are not so safe with the language. to generate the automatic subtitles are NOT an option. it is easy to mishear what you hear. even if you have accurate auditoriy.

on youtube it is very simple. the creator has just to enable the subtitle feature. but now they or "we" to "can" check it. cause there might be imporperly things imbedded in the automatic "transcriptions".

anyway the idea is really good. and things like the subtitles can be done with the time. but there should be agreement from the creater. an even further for everything that has been spoken and not shown on the screen there might by a couple of seconds needed to figure out what is going on.

even with this. i thing there should be created an official youtube channel so the videos could be posted there. even if the "original" creator getting into troubles with (for e.g.) youtube. the video do not get banned immediately. but whit this option you guys have to give the porper credits on the videos. but I think you already thought about this.

how should I check if the video is worth subtitles.
I think most of you guys have disabled subtitles. so just turn them on. minimize the audio lover the lowest you could and try to follow the video.

[d3n1c1d3]

do you have any ideas for a app subtitle?
for e.g.
Stylus - make the internet great again
Stylus - design the internet new again
Stylus - your web, your design

i think it would be easier to create a theme for these images with a cool app subtitle. any suggestions for subtitles?

[narcolepticinsomniac]

My sense of humor is a little out there, but I like:

Stylus - Not "ish".

Obviously because it differentiates between Stylish, but also because Stylish _is_ "ish" now IMO.

Other than that, something like "Redesign the web" or anything similar would be fine.

A background, something like this might be cool to work in somehow.

[d3n1c1d3]

what do you guys think of these?
I inserted these rainbow colored layers to represent the html code.
the background images are taken from stylus / codemirror itself. (dark one with zenburn theme and light one with xq-light) and are from the popup.css without any new lines or comments.

I just see a problem with the light version. google has some rules like
"avoid using a lot of white and light gray."

another problem for the background image is
"Avoid text."
developer.chrome.com/webstore/images#promo

light version:

Marquee - 1400x560

Large tile - 920x680

Small tile - 440x280

dark version:

Marquee - 1400x560

Large tile - 920x680

Small tile - 440x280

---

to support the half size of all images - the outline border of the subtitle text should be 2 or 3 pixels.

and notice to myself:
do'nt use ctrl + enter to force a new line. (this will actually post the comment)

[narcolepticinsomniac]

@d3n1c1d3

Really nice work! I prefer the dark version because the colors pop better. From what I can tell, the code is for an editor style, which is a nice touch.

My only notes would be the capitalization/wording/possible punctuation on "Redesign your Web". Stylish uses "Style your web!". We want to convey the same simple message, but switch it up as much as possible.

I'm thinking maybe "Redesign the web...". That text could also use a bit more stroke, I think. My design ideas are pretty frequently outvoted though, so it'd be better if @schomery and @tophf gave their opinions before any tweaks are made.

[narcolepticinsomniac]

Actually, if they're allowed in certain spots, gifs where the light version fades into the dark might look cool.

[schomery]

@d3n1c1d3 very nice work! would you mind sharing the files so that we can play with it a bit and test different things?

[schomery]

Note that Webstore resizes all these images when displaying them! for instance the 440x280 is displayed as 143x92. Just a hint for testing fonts.

[d3n1c1d3]

@schomery in the google guide line is noted that the images should look fine 50% smaller. so I get the 440x280 image displayed with 220 x 140. to test this it worked good for me to open the images in a new tab. with ctrl + - (minus) you can simply change the display to 50% cause the images are uploaded to cloud.githubusercontent.com this change will not effect github.com.
anyway. in this stage actually I would mind share the source files. but after anything is a bit more solid I definitely give you the source files (psd).
so - if any ideas pop into your mind just post them here and I'll try to implement it.

@narcolepticinsomniac so "Redesign the web..." good.
I dont think that animated gifs are allowed in the store. beside that the file size would be really huge, the quality would be bad. cause gif is limited to 256 colors. anyway I have not seen a single gif animation in the webstore.

---

anyhow, I did made some changes to the images.
I only focus on the dark version from know on. like @narcolepticinsomniac mentioned in the dark version the colors are pop out better.

I actually eleminated the stroke around the text. It looked somekind blury if I shrunk the images to half size.
instead of the stroke I inserted a black shine around the text / logo.
the color layers got a little shadow to each other. beside this the color layers where a bit different in each version. so I copied them from the 1400x560 image to the other versions.
the background image is a bit darker to give a bit more contrast. maybe some blur-effect will be nice added to the background?

---

Marquee - 1400x560

Large tile - 920x680

Small tile - 440x280

---

thoughts for next versions:
blur effect on background - to increase contrast to other elements
same font used on S like the version from @narcolepticinsomniac

[narcolepticinsomniac]

Btw, we sharpened the smaller versions of icons used in the browser chrome, but if you wanna clean up any of my shoddy work on the larger versions, feel free. Perhaps you already have a bit.

[d3n1c1d3]

@narcolepticinsomniac I actually think you did a great work on the logo / icon. it just needs some fine tuning.

---

this time I re-arranged the logo based on @narcolepticinsomniac arrangement.
also used other fonts. Venger for TYLUS and TT Masters DEMO Black for subtitle. The S is completly vectorized.
I also put some Blur effect on the background. and made it therefore a little lighter. because blured it seamed a bit to dark to me.

---

Marquee - 1400x560

Large tile - 920x680

Small tile - 440x280

---

feel free to play with it now. I'll be realy busy for the next days (till next wednesday).
source code:
http://www.mediafire.com/file/790x9e569c9cc7v/Stylus_promotional_tile_images.zip

---

zip archive content:

Stylus promotional tile images
|   
+---fonts
|   +---TT Masters
|   |       Masters-typetype-eng.pdf
|   |       New-free-fonts.pdf
|   |       TT Masters DEMO Birds Regular.otf
|   |       TT Masters DEMO Black.otf
|   |       TT Masters DEMO Rough Thin.otf
|   |       
|   \---Vegur
|           readme.txt
|           Vegur-B_0_600.otf
|           
+---icons
|       128x128.png
|       128x128.psd
|       128x128_grayscale.png
|       128x128_red.png
|       32x32.png
|       32x32.psd
|       32x32_grayscale.png
|       32x32_red.png
|       48x48.png
|       48x48.psd
|       48x48_grayscale.png
|       48x48_red.png
|       96x96.png
|       96x96.psd
|       96x96_grayscale.png
|       96x96_red.png
|       
+---pngs
|   0440x280_vegur_tt_masters_blur.png
|   0920x680_vegur_tt_masters_blur.png
|   1400x560_vegur_tt_masters_blur.png
|
\---source 2017-04-19 vegur tt master blur
        0440x280.psd
        0920x680.psd
        1400x560.psd

[narcolepticinsomniac]

I actually prefer the previous unblurred version. I like that font better as well. Both versions are very good, but I like the sharper backgrounds and fonts.

[d3n1c1d3]

what do you mean by "_I like the sharper ... fonts_"? the subtitle (Redesign the web...)? previous it was _Candara_ a sans serif font with full character support. and the newest version is _TT Masters DEMO Black_ an uppercase only handwriting font and only a few special characters supported.
if you want you can try to search for another free to use font for e.g. on dafont.com (basic themes with public domain or 100% free of use and the text phrase "Redesign the web...") just take care that the font has also dots and is free to use. I would actually appreciate it if you try out some other fonts.

I think a bold font would be great, because the images are currently used in the google webstore with half of there size.
for e.g. the small tile(all extension images) with 440 x 280 pixels will be displayed with 220 x 140 pixels. also the marquee image (slider at the top) (1400 x 560 px) is shown with 700 x 280 pixels.
and i dont have the slightes idea where they use the large tile... did somebody seen that shape on the chrome web store?

[narcolepticinsomniac]

By "sharper", I was more referring to the background blur effect, but yes the new font was "rounder".

I prefer:

instead of:

The text could probably be bolder, but to me, https://github.com/schomery/stylish-chrome/issues/47#issuecomment-295015452 looked pretty damn good.

[d3n1c1d3]

here is a version with vegur for (S)_tylus_, candara (bold) for _Redesign the web..._ and a sharp background. actually I tried to bring up some spice with TT Masters DEMO black. but anyway with candara bold it is also working with half sized images. a friend of mine mentioned that the TT Masters DEMO Black would not look like a "code" app. :D

@tophf @schomery what do you think? what is you favorite version? I also would not mind if you want to try out some other fonts... I actually would appreciate that.

Marquee - 1400x560

Large tile - 920x680

Small tile - 440x280

[narcolepticinsomniac]

I think the last ones are great. If @tophf hasn't offered his opinion by now, it's probably a safe bet that he doesn't have a strong opinion regarding promotional images. @shomery probably will, but I'm not sure he reliably gets notifications when mentioned here. Either that, or he's been busy lately. Last time, sending him an email seemed to work, but let's see if he shows up any time soon first.

[d3n1c1d3]

no problem I'll be also busy over the next days and will have hardly internet access. I just wonder how that is working for me... :/

[schomery]

The last ones are perfect. Well-done! I am going to add them to the WebStore.

[narcolepticinsomniac]

The last ones are perfect. Well-done! I am going to add them to the WebStore.

@schomery Where exactly are they supposed to be shown? I kinda figured they'd replace the stretched out icon as the preview pic, but I don't see them anywhere.

[tophf]

IIRC it may take a couple of days until the new images are shown there.

[narcolepticinsomniac]

Hmm, okay. Multiple days for Google to update a couple simple images sounds about right, come to think of it.

[schomery]

All promotional images need to pass manual review. It is available now!

Subtitle font size needs adjustment. Also I think the "S" icon should be moved to the left side a bit.

Note that the actual displayed image size for small tile is 143x92

[d3n1c1d3]

here you go. if you have any other thoughts. do not hesitate to post them here.

webstore preview

1400x560

920x680

440x280

[schomery]

@d3n1c1d3 Great job, thanks. I am updating the promotional images.

[d3n1c1d3]

@schomery you are welcome.

but if anyone else have other design ideas for this topic I would be pleased to see it.

[schomery]

@d3n1c1d3 would it be possible for you to resize the small-tile image for Opera

The required size is 300x188px.

[d3n1c1d3]

Sure, do you can take a screenshot as an example whereas it is used. So I can prepare a mixed preview like for thw google chrome store. Currently I am sitting in the rain without an umbrella.

[narcolepticinsomniac]

Currently I am sitting in the rain without an umbrella.

Sitting? That's the last stage of accepting your situation.

Whenever you get around to it, if you could touch up those last couple odd-sized icons, we can swap them all out.

[d3n1c1d3]

here you go with the 300x188 pixel version

preview

just the image

the icons are also done in #7 New Icons

the updated source files can be downloaded here (this time without the icons) http://www.mediafire.com/file/djzc037c47i2yjj/2017-05-18_image_tile.zip

[schomery]

Thanks a lot @d3n1c1d3