Logo drastisch verkleinen --> kartels!

[Z-Dragon]

Ik heb een logo (waar ik om verboden reclame tegen te gaan de letters even van verwijderd heb). Het is, niet door mijzelf, in Illustrator gemaakt en bevat een groene ovaal met daaroverheen (d.m.v. een mask zover ik kon zien) een witte rand. Dit logo moet in het hoekje van een website gaan verschijnen, maar een stuk kleiner!

Mijn probleem is dat als ik dit logo wil verkleinen (naar een formaat van 250 px breed) de randen van deze ovaal ontzettend onscherp, korrelig of juist kartelig worden. Nu heb ik in de search slechts een klein dingetje kunnen vinden, namelijk dat ik Object --> Path --> Outline stroke zou moeten uitvoeren. Dat heb ik gedaan maar het geeft nauwelijks of zelfs geen resultaat. Ik weet dat het scalen van afbeeldingen wel vaker problemen geeft met de kwaliteit, maar als ik zelfs het originele ontwerp ervan heb zou dat toch geen probleem mogen zijn? Ik ben behoorlijk Illustratornoob (de enige reden dat ik het nu gebruik is om een bruikbaar klein logo uit het ontwerp te vissen) en ik hoop dat iemand mij op een manier kan wijzen om dit op te lossen. Het uiteindelijke logootje moet in en formaat komen dat transparantie ondersteunt en waar de meeste browsers mee overweg kunnen (gif of misschien png?).

[ Voor 7% gewijzigd door Z-Dragon op 25-07-2006 13:46 ]

[Verwijderd]

Je zou de functie 'place' kunnen proberen in Photoshop. Hiermee kun je een AI bestand importeren, schalen naar behoeven waarna hij hem rendert als pixels. In CS2 kun je hier ook een smart layer van maken die zonder kwaliteitsverlies later te schalen is.

[Savantas]

Hoe kan je in Illustrator zelf nu kartels zien? Als je preview op quality hebt staan ziet het er alleen kleiner uit, niet kartelig. Het logo is toch een vector? Sleep gewoon in je ontwerp in Photoshop (zoals hierboven al vermeld) of ga via File - Save for Web en stel de afbeeldingsgrootte en achtergrondkleur/transparantie in.

[Z-Dragon]

Nee, ook als ik uitzoom in Illustrator zie ik hem kartelig worden. Ik dacht dat het origineel een Illustratordoc was omdat hij perfect herkend werd door Illustrator (alle objecten los bewerkbaaer). De originele extensie was echter '.ps', PostScript?

[ Voor 59% gewijzigd door Z-Dragon op 25-07-2006 14:18 ]

[TeeDee]

Het zijn ook meerdere elipsen over elkaar. Ik denk dat dat wel eens de boosdoener zou kunnen zijn. Denk hierbij aan mogelijke afrondings fouten in de software, of het 'zwarte' randje is < 1 px in je uiteindelijke export.

[FragileM64]

Z-Dragon schreef op dinsdag 25 juli 2006 @ 14:16:
Nee, ook als ik uitzoom in Illustrator zie ik hem kartelig worden. Ik dacht dat het origineel een Illustratordoc was omdat hij perfect herkend werd door Illustrator (alle objecten los bewerkbaaer). De originele extensie was echter '.ps', PostScript?

Teken hem even over in illustrator, dat is exact 1 min werk en je kan zoveel verschalen als je wil.

[Z-Dragon]

Zoals ik al zei zijn mijn Illustratorkunsten gelijk aan nul. Lijkt me nogal lastig worden dan. (Momenteel ben ik even de PhotoShop tips aan het nagaan.)

Met PhotoShop en de "plaats"-/placefunctie wil het niet lukken. De functie lijkt ook niet bedoeld om te verkleinen zonder kwaliteitsverlies maar meer om eerder verkleinde afbeeldingen weer terug te brengen naar het originele formaat zonder verlies.

[ Voor 47% gewijzigd door Z-Dragon op 25-07-2006 14:38 ]

[Savantas]

Dan begrijp je geloof ik het verschil tussen vector en bitmap niet. Als je het origineel in Illustrator opent en dan inzoomt met het vergrootglas, word het dan ook een blokkendoos? Dan is het origineel geen vector, maar een bitmap. Je kan in Illustrator wel een bitmap plaatsen en dan opslaan als Illustrator. Dan bewaart hij het zeg maar als pagina met daarop een foto, maar maakt de foto niet ineens volledig onbeperkt schaalbaar...
Je logo zou in Illustrator niet blokkerig moeten worden, want hij is echt volledig vector (althans het deel wat je in logo.ai liet zitten). Zie inzoomen hier.

[ Voor 21% gewijzigd door Savantas op 25-07-2006 15:31 ]

[Z-Dragon]

Ik snap (denk ik) het verschil tussen een een vector en een bitmap wel. Nee, het wordt een blokkendoos met uitzoomen maar niet met inzoomen. Als Illustrator de vormpjes op zichzelf weet te onderscheiden en er met uitvergroten geen kwaliteitsverlies zichtbaar is, is het toch een vector? Hoe dan ook, ik heb maar even het origineel geüpload voor meer duidelijkheid.

[ Voor 11% gewijzigd door Z-Dragon op 25-07-2006 15:17 ]

[Orion84]

Als ik die PS open in Paintshop Pro op 300 DPI en vervolgens resize naar 250 pixels breed dan ziet dat er echt niet ranzig uit hoor? Ten minste, je moet dan natuurlijk niet dat ding fullscreen gaan bekijken

Als 250 pixel brede PNG: http://tweakers.net/ext/f...73f4f4536d20b0d5/full.png

Op minder DPI openen kan ook, dan hoef je daarna minder te resizen, effect is volgens mij ongeveer het zelfde.

In photoshop kan je zelfs al meteen de afmetingen in pixels opgeven tijdens het openen. Dan hoef je hem daarna alleen nog maar in een geschikt bestandsformaat (PNG, jpg, gif) op te slaan voor op je site.

[ Voor 36% gewijzigd door Orion84 op 25-07-2006 15:28 ]

[Just_I]

Met zowel de .AI als de .PS had ik geen problemen. Bij mij werd het niet echt overduidelijk kartelig of iets dergelijks. Wat je natuurlijk ook had kunnen doen is de PS op een grotere resolutie te openen dan dat je uiteindelijk moet hebben. Dan kan je met Photoshop altijd nog wel de afbeelding naar beneden verkleinen om zodoende de kartles weg te werken.

Overigens had ik de .AI in Illustrator omgezet naar een .EPS. Die kan je in Photoshop ook openen, maar werkt ongeveer net zoals de .PS

De kleur van de .png van Orion84 klopt niet helemaal met de kleuren in de .PS en de .AI . De groene is wel in ene keer heel erg gifgroen geworden.

[ Voor 14% gewijzigd door Just_I op 25-07-2006 15:31 ]

[Z-Dragon]

Het grootste punt is dat de afbeeldingsachtergrond transparant wordt. Als de websiteachtergrond wit zou blijven zou het niet zo opvallen dat de randen onscherp worden, maar als de websiteachtergrond een verlooptint groen is en en deze eroverheen geplakt wordt kun je zien hoe onscherp de randen zijn geworden. De websiteachtergrondkleur inbakken in de afbeelding kan dus ook niet, want het is een verlooptint.

[ Voor 25% gewijzigd door Z-Dragon op 25-07-2006 15:32 ]

[Orion84]

Mja, dat komt omdat dan je anti-aliasing om zeep geholpen wordt.

Heb je dat probleem ook met de PNG die ik postte?

[ Voor 30% gewijzigd door Orion84 op 25-07-2006 15:34 ]

[Z-Dragon]

Dus?

[Just_I]

Orion84 schreef op dinsdag 25 juli 2006 @ 15:31:
Mja, dat komt omdat dan je anti-aliasing om zeep geholpen wordt.

Dat gebeurd hier idd ook met het gebruik van .gif . Bij de .png heb ik geen probleem hiermee.

Heb je dat probleem ook met de PNG die ik postte?

Je doelt op het kleurverschil wat ik daarnet aanhaalde toch?

[ Voor 8% gewijzigd door Just_I op 25-07-2006 15:36 ]

[Orion84]

Hoe maak jij die achtergrond transparant dan? Post eens de file die je nu in de website probeert te zetten, of post ff een url naar de website ofzo, dat maakt de boel wat duidelijker. Want voor zover wij kunnen zien is er niks mis met de pic.

Die kleuren komt prolly omdat dat ding CMYK was ofzo, en PSP dat ranzig verbouwd heeft?

Zo beter (Nu met PS ipv PSP):

http://tweakers.net/ext/f...305e39533fce3bcf/full.png

[ Voor 31% gewijzigd door Orion84 op 25-07-2006 15:41 ]

[Savantas]

Ha, now you are making sense! Je bedoeld dat de witte rand te iel word (en dus blokkerig).
Zet het logo in Photoshop in een aparte laag. Zorg dat de achtergrond (of een andere lager liggende laag) de juiste kleur groen is.Pas nu via layer effects een outer glow toe van wit. Speel met de intstellingen om het goede resultaat te krijgen.
Dan nog opslaan... Gebruik hiervoor gif of png-8.
[mumble]
In de ideale wereld zou png-24 het mooist zijn omdat die de transparantie onthoud, zodat je dezelfde afbeelding op een rode en een groene achtergrond kan gebruiken. Helaas zitten veel mensen aan IE vast, die onder andere png-24 niet goed ondersteunt.
[/mumble]
Dus een gif of png-8 dan maar. Stel hierbij het kleurenpallet (bij Save To Web) zo in dat je logo klein genoeg is zonder dat hij brak word. Stel de boel in op transparantie met als randkleur de beoogde groene kleur. Na wat klooien krijg je het juiste effect van een mooie witte rand ipv kartels. Helaas is dit voor verloopjes als achtergrond heel moeilijk te doen. Je kan wel als randkleur nemen welke ongeveer in het midden van het verloop zit, dan valt het minder op.

[ Voor 16% gewijzigd door Savantas op 25-07-2006 15:50 ]

[Just_I]

^^ Welke witte rand, degene tussen het zwart en het groen? Daar gebeurd toch weinig verkeerds mee?

Orion84 schreef op dinsdag 25 juli 2006 @ 15:36:
Hoe maak jij die achtergrond transparant dan? Post eens de file die je nu in de website probeert te zetten, of post ff een url naar de website ofzo, dat maakt de boel wat duidelijker. Want voor zover wij kunnen zien is er niks mis met de pic.

Die kleuren komt prolly omdat dat ding CMYK was ofzo, en PSP dat ranzig verbouwd heeft?

Ah vandaar natuurlijk, ik had het al in het begin omgezet naar RGB

[ Voor 9% gewijzigd door Just_I op 25-07-2006 15:41 ]

[Z-Dragon]

Ik krijg nieteens de kans om het te laten zien.

De website is hier nog offline in de maak. Hier een plaatje van wat er aan de hand is. Van png's pakt hij de transparantie niet (IE) maar het plaatje van Orion84 zag er net zo onscherp uit als mijn voorbeeldje.

Savantas: de website heeft dus als verlooptint als achtergrond. Ik kan die dus nooit netjes kloppend krijgen met de achtergrond van de afbeelding, als ik die ook een verlooptint zou maken.

[ Voor 25% gewijzigd door Z-Dragon op 25-07-2006 15:50 ]

[Orion84]

In die "screenshot" ziet het logo er een stuk ranziger uit dan in de door mij gepostte png, geen idee hoe het komt

[Z-Dragon]

Misschien wel, maar op wat voor manier dan ook: ranzig wordt hij toch. Misschien komt het doordat ik transparantie heb toegepast? Let wel op: dit is een gif en geen png, want dat trekt IE niet.

[ Voor 51% gewijzigd door Z-Dragon op 25-07-2006 16:01 ]

[Savantas]

Ah, dan ligt de karteling niet aan de randkleur, maar is de zwarte rand gewoon te subtiel.
Maak die in Pshop ietsje dikker (zet gewoon logo.ai in laag eronder en geef deze laag een stroke-effect. Zet de kleur op zwart en dikte op minimaal. Exporteer met nog steeds de groene kleur als randkleur (je donkerste en lichtste kleur groen verschillen weinig, dus valt het nauwelijks op.

Zet deze maar eens tegen je achtergrond (pas op, ik heb de kleur groen uit je ai, en deze wijkt iets af van je andere plaatje...) Sorry voor de lelijke crop trouwens, is ff quick and dirty...
Als je bij de html-code kan is het ook mogelijk een behavior dan wel klein stukje javascript te gebruiken om png's wel in IE te laten werken. Op mijn eigen site heb ik dit veelvuldig gebruikt en werkt prima!

[ Voor 24% gewijzigd door Savantas op 06-10-2006 12:52 ]

[Just_I]

Ik heb net even wat geprobeerd:
snip
Het probleem zit het hem dus in de manier van opslaan. De PNG-8 zorgt er dus voor dat de aliassing verdwijnt, bijde PNG-24 heb je dit dus niet.
Eronder nog even de oplossing van Savantas geprobeerd, het is aan je zelf of je dit toelaatbaar vind, maar het lijkt mij iig de beste optie.

offtopic:
vv die heb ik niet, geen eigen webspace en ook niks van provider ( HHS ), maar ik snap het probleem niet helemaal eigenlijk. Die site is net zoiets als imegashack, maar dan zonder die irritante popups

Anti hotlink met porn doen we maar niet he

[ Voor 34% gewijzigd door BtM909 op 25-07-2006 18:05 ]

[Orion84]

Als ik jou screenshot pak en daar het logo even uit haal door een groot stuk van de achtergrond er overheen te kopieren en vervolgens het logo dat ik had verkleind er in plaats dan wordt het niet lelijk.



Ik weet niet hoe jij precies aan die 2.png kwam, maar als dat een screenshot is uit je browser ofzo, dan maakt die browser het dus lelijk.

Enige optie die je dan hebt is toch de achtergrond van de website op de juiste manier in photoshop ofzo al in het plaatje verwerken, waardoor je niet met een transparante png moet werken die brak wordt in IE.

Just_I schreef op dinsdag 25 juli 2006 @ 16:07:
Ik heb net even wat geprobeerd:
snip
Het probleem zit het hem dus in de manier van opslaan. De PNG-8 zorgt er dus voor dat de aliassing verdwijnt, bijde PNG-24 heb je dit dus niet.
Eronder nog even de oplossing van Savantas geprobeerd, het is aan je zelf of je dit toelaatbaar vind, maar het lijkt mij iig de beste optie.

Pak even een fatsoenlijke host ofzo De meeste Gotters zitten niet te wachten op Pron links enzo als ze een plaatje openen.

[ Voor 37% gewijzigd door BtM909 op 25-07-2006 18:05 ]

[Savantas]

Haha, Orion, ik was daar ook net mee bezig:

Onderste is veel mooier...

offtopic:
@Just_I: Hier op werk word ie geblocked, en uit Orion zijn reactie begrijp ik niet geheel onterecht...

Hier verschil in IE en FF (direct vanuit TopStyle gescreendumped):

Witte vlek komt door niet ondersteund png24 van IE

[ Voor 84% gewijzigd door Savantas op 06-10-2006 12:51 ]

[Z-Dragon]

Dat ziet er al stukken beter uit!

Ik snap alleen nog niet wat je nu precies gedaan hebt. Kun je dat nog iets uitgebreider en stapsgewijzer beschrijven?

[Just_I]

Savantas schreef op dinsdag 25 juli 2006 @ 16:13:

offtopic:
@Just_I: Hier op werk word ie geblocked, en uit Orion zijn reactie begrijp ik niet geheel onterecht...

offtopic:
Als jullie een betere host weten, sta ik open voor suggesties (en, ja, ik weet dat je bij een abbo webspacekrijgt)

[Orion84]

Gewoon in een photobewerkingsprogramma het logo op de verlopende groene achtergrond zetten. In plaats van de achtergrond en een transparante PNG in de website te stoppen en een browser het samenvoegen te laten doen.

Just_I schreef op dinsdag 25 juli 2006 @ 16:17:
[...]

offtopic:
Als jullie een betere host weten, sta ik open voor suggesties (en, ja, ik weet dat je bij een abbo webspacekrijgt)

Imageshack ofzo?

[ Voor 38% gewijzigd door Orion84 op 25-07-2006 16:18 ]

[Z-Dragon]

Wat een hoop reacties weer.

Als ik het goed begrijp heb ik dus geen andere goede optie dan de achtergrond te kopiëren, tenzij ik de rand dikker maak?

[Just_I]

Z-Dragon schreef op dinsdag 25 juli 2006 @ 16:18:
Wat een hoop reacties weer.

Als ik het goed begrijp heb ik dus geen andere goede optie dan de achtergrond te kopiëren, tenzij ik de rand dikker maak?

Dat zou idd een optie zijn, of je maakt een glow in de kleur van de achtergrond om het logo. ZO te zien zit het plaatje in de linkerbovenhoek van de site toch? In dat geval is het volgens mij niet zo moeilijk om het plaatje in te bouwen als een rechthoek in de site.

offtopic:
Imageshack gebruik ik juist niet meer, meer info.

[Savantas]

offtopic:
Flickr-accountje aanmaken? Werkt ook best ok

Gepost uit Flickr, gaat helaas niet met een klik, maar werkt wel...

[ Voor 61% gewijzigd door Savantas op 25-07-2006 16:35 ]

[Orion84]

Just_I schreef op dinsdag 25 juli 2006 @ 16:27:
[...]

Dat zou idd een optie zijn, of je maakt een glow in de kleur van de achtergrond om het logo. ZO te zien zit het plaatje in de linkerbovenhoek van de site toch? In dat geval is het volgens mij niet zo moeilijk om het plaatje in te bouwen als een rechthoek in de site.

offtopic:
Imageshack gebruik ik juist niet meer, meer info.

Mja, maar zo'n glow wordt weer lastig omdat die achtergrond een gradient is.

offtopic:
Heb je geen webspace van je internetprovider ofzo? Anders is picserver.org ook nog een optie misschien?

[Savantas]

Orion84 schreef op dinsdag 25 juli 2006 @ 16:17:
Gewoon in een photobewerkingsprogramma het logo op de verlopende groene achtergrond zetten. In plaats van de achtergrond en een transparante PNG in de website te stoppen en een browser het samenvoegen te laten doen.

Je moet dan wel het hele plaatje als link naar de home-button doen, dus niet instellen als achtergrond... Of je moet het logo niet als Home-link gebruiken...

[Orion84]

Savantas schreef op dinsdag 25 juli 2006 @ 16:37:
[...]

Je moet dan wel het hele plaatje als link naar de home-button doen, dus niet instellen als achtergrond... Of je moet het logo niet als Home-link gebruiken...

Mja, hij kan een gradient instellen als achtergrond en een plaatje ter grote van iets meer dan het logo in de hoek neerzetten. Dat plaatje bevat dan het logo en een copy van een stukje achtergrond. Als je dat goed doet kan je dat netjes over elkaar heen leggen en het plaatje laten linken.

[Z-Dragon]

Ik weet nog niet of het op die manier gaat lukken. De site is gebaseerd op een Joomlatemplate. Ik heb dus niet helemaal zelf in de hand hoe die afbeelding geplaatst wordt en of het dus mogelijk wordt om hem exact zo neer te zetten dat het klopt. Dat moet ik nog even bekijken. Graag zou ik dus (voor de zekerheid en mijn interesse) nog even van Savantas iets uitgebreider/stapsgewijzer willen weten hoe hij zijn trucje mèt transparantie (en dan de randen dikker maken) uithaalde.

[Z-Dragon]

Goed, het werkt nu. Er introduceert zich echter een nieuw probleem: afdrukken. Wanneer ik deze pagina print zal dit logo in een lelijk blokje van gedeeltelijke achtergrond staan. What now?

[BtM909]

Een aparte CSS stylesheet voor printen toevoegen en daar wel een goed logo gebruiken

[Z-Dragon]

Ik gebruik geen Joomla omdat ik een CSS-expert ben.
Het logo wordt gespecificeerd in de index.php van de Joomlatemplate. Wat kan ik daaraan veranderen om een uitzondering te maken bij het afdrukken?

[Z-Dragon]

Ik heb de CSS-map en de index.php even gezipt naar dit bestand. Het ziet er op het eerste gezicht niet uit alsof het eenvoudig verbouwd kan worden omdat het logo in de index zelf en niet in de stylesheet wordt opgegeven, maar misschien denkt iemand daar anders over.

[ Voor 14% gewijzigd door Z-Dragon op 25-07-2006 19:04 ]

[Z-Dragon]

*Schop!*

[Savantas]

je zipje krijg ik niet uitgepakt (een en al foutmeldingen in WinRAR). Maar kijk even of in Joomla de afbeelding in een een #id of .class staat. Dan kan je in een print-css opgeven dat de betreffende class/div visibility: hidden is. Nu alleen nog de achtergrond (in normale versie het verloopje) een 300dpi variant van het logo staat oid. Al moet je dan denk ik de afbeelding in pixels kleiner zetten... Vraag me af of hij er dan toch strak uitkomt?
Dat ga ik even proberen...
Forget it... Background kan je verder niet instellen, dus kan je voor een hoge res afbeelding niet het aantal pixels opgeven. Dan zou je moeten werken met een zwevend of absoluut gepositioneerd divje welke je in webview hidden maakt en in print visible (en voor lowres logo andersom...). Kortom beetje gedoe.
Internet leent zich niet echt voor highres output. Of je moet een flash-logotje plaatsen...
Maak in je template twee verschillende divjes met id's logoscreen en logoprint (of welke naam je logisch lijkt). In #logoscreen zet je het normale low-res logo, in #logoprint zet je de 300dpi variant met in de img tag de width en height van de lowres-logo in px.
Maak nu een aparte css voor media=print.
In je screen-css zet je

Cascading Stylesheet:

div#logoprint { visibility: hidden }

in je print-css

Cascading Stylesheet:

div#logoscreen { visibility: hidden }

Nu maar printen!

[ Voor 53% gewijzigd door Savantas op 27-07-2006 15:49 ]

[Z-Dragon]

Zipje gefixt. Hij was Bzip2 gecomprimeerd. Of ik snap het nog niet goed genoeg, of de template is niet gebouwd volgens jouw theorie. Wil je zelf nog even kijken of dit wel zou werken in deze situatie?

[ Voor 5% gewijzigd door Z-Dragon op 30-07-2006 16:54 ]

[Z-Dragon]

[Z-Dragon]

[Savantas]

In je index.php staat

code:

        <div id="top-bottom">
            <a href="index.php">
                <?php echo '<img src="' .$mosConfig_live_site. '/templates/' .$GLOBALS['cur_template']. '/images/logo.gif" border="0" width="249" height="57" alt="logo" />'; ?>
                </a>
        </div>

Ga dit aan de hand van mijn voorbeeld eens ombouwen... Als je de template toch niet veranderd kan je van de image gewone html maken:

code:

<img src="locatie/images/logo.gif" border="0" width="249" height="57" alt="logo" >

en zet meteen in het div#top-bottom dus twee divjes #logoprint en #logoscreen:

code:

<div id="top-bottom">
    <div id="logoscreen">
        <a href="index.php">
            <img src="locatie/images/logo96dpi.gif" border="0" width="249" height="57" alt="logo">
        </a>
    </div>
    <div id="logoprint">
        <img src="locatie/images/logo300dpi.gif" border="0" width="249" height="57" alt="logo">
    </div>
</div>

en in je css dus wat ik al eerder gepost had.

Hmm, topic moet eigenlijk ondertussen verplaatst naar Webdesign, Markup & Clientside Scripting, lijkt me

[ Voor 6% gewijzigd door Savantas op 01-08-2006 14:52 ]