[Design-devel] issues with the website homepage banner (Theme futurePrototype)

Ana Isabel Carvalho a at manufacturaindependente.org
Wed Jul 10 16:58:55 BST 2019

On 7/10/19 2:18 PM, Laura Arjona Reina wrote:
> Hello
> (Sorry for the long mail, I couldn't find time to  shrink it...)
> We have had some issues to setup the website homepage banner for the new theme 
> included in Debian 10 buster (theme futurePrototype 
> https://wiki.debian.org/DebianArt/Themes/futurePrototype ).
> This mail is to explain what I've been able to figure out and see if we can 
> improve further.
> 1.- Starting point
> Alex Makas provided a png with the website banner (thanks!)
> https://wiki.debian.org/DebianArt/Themes/futurePrototype?action=AttachFile&do=get&target=website-banner.png 
> but until now we have used 2 png files for the website banner: one with the 
> background and other with the debian swirl + text + motto
> I'm not sure why we are using 2 files; I *think* it is because the older 
> background png files were designed in a way that they were fitting wide screens 
> nicely, but I'm not sure if the stretch/buster background PNG files include that feature. See for example the -bg files for Joy and Lines themes in https://www.debian.org/Pics, and compare with softwaves or futureprototype.
> Somebody should have a look at this situation, the related CSS code (see 
> https://salsa.debian.org/webmaster-team/webwml/blob/master/english/debhome.css 
> splash and splash h1 sections), the related wml code:
> <div id="splash">
> 	<h1>Debian</h1>
> </div>
> (in https://salsa.debian.org/webmaster-team/webwml/blob/master/english/index.wml 
> file) and see if we still would need 2 files for the homepage banner, or one png 
> (or svg) is enough. And define the requirements for the 2 files (or the only 
> file, wether png or svg).
> 2.- So, as my skills are not enough to solve the questions I have in step 1, what I did was to take the SVG file corresponding to the website banner 
> from the source data of the futurePrototype theme (available in the same wiki 
> page), and then copied it obtaining 2 SVG files, then in one I removed the 
> background, saved it, and exported it as PNG (800x120), and in the other one I 
> left only the background, saved it, and exported it as PNG (800x120).
> This it was done in a Debian stretch machine with the fonts-quicksand installed 
> from buster, and the stretch Inkscape, and uploaded in the new-homepage branch 3 
> months ago.
> 3.- Last week we released buster and then I copied the PNG files from the new-homepage branch to the master branch, commited, and I thought we were done.
> You can see those files in the test site we have for the new-homepage branch:
> https://debian-newhomepage.larjona.net
> 4.- Then Taowa noticed that something was wrong with the kerning in the motto "The universal operating system". He provided updated files but one was made without the Quicksand font installed, and the other one tweaking the PNG instead of using the SVG, so the resulting images had their own issues.
> 5.- Today I downloaded again the original SVG files to try to manually tweak the inter character spacing in order to produce a better kerning, but opening the original SVG file I was not able to see the kerning issue. Then I noticed that this time I was working in a machine already in Debian 10 buster, with new version of Inkscape, and probably better fit of the fonts package in the system.
> Then I just repeated the step 2 (copy the file, leave one of them with only the background, the other one with the swirl, debian word and motto sentence, save, export as PNG, commit.
> 6.- I noticed that the characters in the sentence "The universal operating system" in the SVG and these new PNG files were thinner than in the original PNG provided by Alex Makas. I tried to use the bold font but then they were much thicker and I should center the sentence respect of the image, so I left the normal font.
> The result will be visible in the website in the next hours but you can see the png file here:
> https://deb.li/f0rF
> I don't know if this result can be improved or not, and if the issues of bad kerning in stretch or thinner font in buster are bugs or features and if they are related to inkscape or the font package or the font upstream.
> Any advice is welcome, as well as advice about the specific requirements we (website team) should provide in the artwork contest so designers know what to provide, exactly.

Hi Laura,

As a quick fix I edited the original website banner SVG file to convert
the text to outline/path.
I'm sending it in attachment (SVG + PNG) together with QuickSand Medium,
which seems to be the original font weight used.

I didn't explore all the materials in this zip:
but I would suggest including the font(s). It's very useful to have the
font that was used especially because fonts have versions and sometimes
more recent/older versions look slightly different.

Hope this helps!

Ana Isabel

-------------- next part --------------
A non-text attachment was scrubbed...
Name: website-banner_outlined-text.png
Type: image/png
Size: 11687 bytes
Desc: not available
URL: <http://alioth-lists.debian.net/pipermail/design-devel/attachments/20190710/11c1aece/attachment.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: website-banner_outlined-text.svg
Type: image/svg+xml
Size: 45192 bytes
Desc: not available
URL: <http://alioth-lists.debian.net/pipermail/design-devel/attachments/20190710/11c1aece/attachment.svg>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Quicksand-Medium.ttf
Type: font/ttf
Size: 106468 bytes
Desc: not available
URL: <http://alioth-lists.debian.net/pipermail/design-devel/attachments/20190710/11c1aece/attachment.bin>

More information about the Design-devel mailing list