14 berichten aan het bekijken - 1 tot 14 (van in totaal 14)
  • Q:

    Bijdrager
    verwijderd-profiel

    PNG naar vector-afbeeldingen met oneindige (?) resolutie

    Hallo,

    Ik ben bezig met het maken van een iOS app. Ik werkte in Xcode 5 maar heb deze week geupgrade naar Xcode 6. Toen ik vandaag weer een aantal afbeeldingen wilde toevoegen zag ik dat er nu naar @1x en @2x ook een @3x was. Toen ik even op internet zocht kwam ik ergens tegen dat Xcode nu vector ondersteunt. Ik weet niet precies wat vector is, maar als ik het goed begrijp worden alle lijnen, curves etc opgeslagen. Deze kunnen dan zo groot worden gemaakt als je zelf wilt, zonder dat het onscherp wordt? Of werkt vector niet zo? En kan een afbeelding omzetten naar vector, of kan dat niet?
    De afbeeldingen die ik tot nu toe heb zijn zwart/transparant, 1 kleur dus.

    Dit wil ik ook in mn iOS app bouwen, want dat scheelt weer heel wat werkt als er nieuwe iPhones ofzo komen, en ook als ik hem iPhone 6 en 6 plus compatible wil maken.

    Ik wil dus de bestaande afbeeldingen omzetten naar vector-PDF. Maar hoe doe ik dat?

    Illustrator is een programma die dit kan, maar dat heb ik niet.
    Ik heb wel Pixelmator, maar ik kan niet vinden hoe dit moet. Als Pixelmator dit kan tenminste…
    Als Pixelmator dat niet kan, welk programma kan dat dan wel?

    Want als ik het goed begrijp, als ik een afbeelding van bijv. 50×50 wil en een vector-versie daarvan in Xcode zet (en 50×50) instel, dan kan Xcode er zelf 100×100, 150×150, 200×200 etc van maken zonder dat het onscherp wordt?

    Alvast bedankt.


    Bijdrager
    Jakko Westerbeke
    Dr. op 14 november 2014

    Ik weet niet precies wat vector is

    Een vector is een wiskundig begrip, dat

    in de meetkunde en de natuurkunde een grootheid voor[stelt] die zowel grootte als richting heeft (en eventueel een zin afhankelijk van de gehanteerde definitie), zoals verplaatsing, snelheid, versnelling, kracht, e.d.

    Vectorafbeeldingen bestaan niet uit pixels, maar uit vectoren waarmee (om het eenvoudig te zeggen) aangeven wordt in welke richting een lijn loopt. Inderdaad kun je daar oneindig op inzoomen zonder dat de afbeelding onscherp wordt, omdat de computer weet waar zich lijnen, vlakken, e.d. bevinden en dan uit kan rekenen welk deel je daarvan ziet. Dit in tegenstelling tot een rasterafbeelding, waarbij de computer alleen weet welke kleur de pixels hebben, en je dus nooit verder in kunt zoomen dan de pixels toelaten.

    Dr. op 14 november 2014

    En kan een afbeelding omzetten naar vector, of kan dat niet?

    Dat kan, maar de resultaten ervan zijn sterk afhankelijk van wat er op de afbeelding staat. Heb je iets dat puur zwart-wit is en uit lijnen en/of vlakken bestaat, dan zal het best goed gaan. Een foto daarentegen kun je wel vergeten:) (Tenminste, als je het ook werkbaar wilt houden.)

    Dr. op 14 november 2014

    Ik wil dus de bestaande afbeeldingen omzetten naar vector-PDF. Maar hoe doe ik dat?

    Illustrator is een programma die dit kan, maar dat heb ik niet.

    Dat was mijn suggestie geweest. Illustrator doet dat redelijk goed, maar je moet meestal wel knutselen aan de instellingen van de conversie om een goed resultaat te krijgen.

    Dr. op 14 november 2014

    Ik heb wel Pixelmator, maar ik kan niet vinden hoe dit moet. Als Pixelmator dit kan tenminste…

    Ik denk het niet, want dat is een pixelgericht programma, en wat je nodig hebt is een programma dat met vectorafbeeldingen werkt. Inkscape kan het wel: hier uitleg over hoe.


    Moderator
    Night

    Let er wel op dat het eigenlijk een fysieke onmogelijkheid is om pixels naar vectoren om te zetten. Wat er gebeurt, is dat de afbeelding wordt getraced, ofwel wordt ‘overgetrokken’ en de computer probeert de randjes van de kleurvlakken ‘in te schatten’ en probeert een zo nauwkeurige curve te tekenen, die dit grensvlak zo nauwkeurig mogelijk volgt. Je kan je voorstellen dat een bitmap afbeelding van lage resolutie (lees: schermresolutie) minder pixels heeft, dan een hoge-resolutie afbeelding. Hierdoor moet de computer veel meer gaan ‘raden’ hoe de curve moet lopen, met als gevolg dat het resultaat erg kan tegenvallen. Waar het trace programma vooral moeite mee heeft, zijn rechte lijnen en scherpe hoeken. Dat komt omdat de pixels puur horizontaal en verticaal lopen en een rechte lijn die niet exact horizontaal, verticaal of diagonaal loopt, zal dan een ‘slingerende’ curve als gevolg hebben.


    Bijdrager
    jansnoek

    Hoi

    je kan een foto ” tracen” naar een vector met de gratis variant van Illustrator: Inkscape.
    zowel voor windows als voor de mac te downloaden.

    hier is een tutorial


    Bijdrager
    jansnoek

    Bijdrager
    Pivni Pes

    Jansnoek, lees een wat Jakko schrijft.

     (Tenminste, als je het ook werkbaar wilt houden.) 

    Hij schrijft niet dat het niet kan, hij bedoel waarschijnlijk meer dat je onwerkbaar grote bestanden krijgt.
    Als je dit dan bekijkt met een vectorprogramma dan zit het vol met ankerpunten, elke stap die je dan doet zoals verkleinen of vergroten moet alles weer berekend worden.
    Voor een projectje leuk en aardig, maar als je er echt mee moet werken wil je dat niet.


    Bijdrager
    Jakko Westerbeke

    Inderdaad, ik bedoelde dat je bestanden krijgt van belachelijk grote afmetingen die relatief langzaam op het beeld gezet zullen worden. Laat ik eens even een demonstratie geven … Hier is een foto die ik ooit genomen heb van een eend:

    Ik heb het origineel daarvan (niet de verkleinde versie hierboven) omgezet naar een vectorafbeelding met Illustrator CS6 met de volgende instellingen:

    En … nou ja, vergelijk zelf maar wat het verschil is in de bestanden:

    Als je dan een beetje inzoomt, ziet het er zo uit:

    Geef mij de JPEG dan maar:)


    Bijdrager
    Shmoo

    Het is ook niet de bedoeling dat je dat soort afb. omzet naar vector-bestanden maar het gaat waarschijnlijk om de buttons/icons in de app zelf.

    Afbeeldingen die je normaal als .png of .gif exporteert die kun je waarschijnlijk als .svg importeren in Xcode en dan schaalt de app zelf naar het juiste formaat.

    Los daarvan heeft nog nooit zo’n auto-trace functie perfect gewerkt. Zelfs niet met hele simpele icoontjes (zwart/wit) als je die auto. omzette naar een vector moest je altijd met de pen-tool nog aanpassingen maken omdat een path bijv. niet afgesloten was or er ergens iets niet mooi rond was.
    Illustrator heeft wel by far de aller beste auto-trace functie, alle andere apps die er eentje hebben maken gewoon gebruiken van een gratis Open Source scriptje dat online te verkrijgen is en dat voor geen meter werkt.
    Ik heb ooit in de Mac App Store een simpel klein papje gekocht genaamd Image Vectorizer ( 5,- ) en kon een simpel Batman logo omzetten, resultaat is dat dit helemaal niet mogelijk was. Ik heb het retro Batman logo gedownload als 1800px breed in .png formaat super strak en groot met veel details zoals ze in het voorbeeld toonde maar zelfs dat kon het kleine appje niet eens omzetten tot een serieuze vector, laat staan als je met kleine icoontjes gaat werken a 64x64px.

    Nee als je niet de originele vector bestanden hebt ga dan niet proberen er vectors van te maken wanneer je niet zelf met de pen-tool deze kunt overtrekken en opnieuw ontwerpen maar koop voor minder dan 2 tientjes een setje icons ergens online dan krijg je meestal wel direct het EPS bestand erbij.

    Laatste toevoeging,
    Inkscape heb ik onderlaatst ook eens gedownload maar tijdens het installeren moest je al direct extra/speciale software op je Mac installeren omdat het programma schijnbaar op zo’n oude structuur ontworpen is. Geen idee hoe dat zit maar ik vond het allemaal zwaar amateuristisch.

    Gebruik een van de onderstaande apps om in vector-formaat te ontwerpen. Beide hebben trail versies van een paar dagen.
    Affinity Designer
    Sketch 3

    Affinity Designer komt het meest in de buurt van Illustrator van alle programma’s die met vectors kunnen werken, het kan ook exporteren in veel verschillende formaten + kan Illy bestanden lezen/openen zonder functies te beschadigen, iets dat echt niet zo simpel is.

    Sketch 3 is meer een vector app gericht op app/web designers en kent extreem veel handigheidjes die je nodig hebt bij het ontwerpen van layouts. Het is dan ook minder geschikt voor het ontwerpen van logo’s en dat soort dingen. Sketch 3 heeft ook een extreem handige en super snelle export functie. Elke laag/object/groep of zelfs een heel artboard kun je exporteren en direct aangeven of het een @1, @1.5, @2 …. bestand moet zijn.


    Bijdrager
    verwijderd-profiel

    Oke, dus als ik het goed begrijp is het beter om vector-afbeeldingen te maken dan pixel-afbeeldingen om te zetten naar vector-afbeeldingen?

    Dat is opzich geen probleem, want ik heb nog maar een paar afbeeldingen.
    Het gaat inderdaad om alleen zwart-wit afbeeldingen, die ik dan in Xcode een tint-color kan meegeven.

    Ik zal eens even gaan kijken naar Sketch 3, en kijken hoe makkelijk het is om vector-afbeeldingen te maken.
    (Gewoon lijntjes trekken / punten plaatsen en fill geven neem ik aan?)

    Ik laat weten of het lukt!

    Bedankt allen.


    Bijdrager
    Jakko Westerbeke

    Het is ook niet de bedoeling dat je dat soort afb. omzet naar vector-bestanden

    Het is dan ook mijn punt dat het geen goed idee is als dat wél je bedoeling is …

    Los daarvan heeft nog nooit zo’n auto-trace functie perfect gewerkt.

    Inderdaad, het enige waar het écht goed op zal werken is als je alleen vlakken van kleuren hebt die door horizontale en verticale lijnen begrensd worden, en waar geen overlopen of niks in zitten. Zelfs dan krijg je vaak net wat gebogen lijnen, afgeronde hoeken, enz.

    Nee als je niet de originele vector bestanden hebt ga dan niet proberen er vectors van te maken

    Of je dat kunt is de vraag waar je mee begint. Stel dat iemand een pentekening gemaakt heeft en je hebt die nodig als vectorafbeelding, dan zul je wel moeten: scannen ervan levert een rasterafbeelding op, die je dan om zult moeten zetten naar vectoren. Zijn het eenvoudige icoontjes, ontwerp ze dan liever inderdaad met de hand opnieuw, dat gaat hoogstwaarschijnlijk uiteindelijk sneller zijn en/of minder moeite opleveren dan te proberen ze netjes over te laten trekken.

    Inkscape heb ik onderlaatst ook eens gedownload maar tijdens het installeren moest je al direct extra/speciale software op je Mac installeren omdat het programma schijnbaar op zo’n oude structuur ontworpen is. Geen idee hoe dat zit maar ik vond het allemaal zwaar amateuristisch.

    Inkscape is origineel geschreven voor Linux, en dan zul je op een Mac — vermoed ik, ik heb het niet nagekeken — even de X11-implementatie van Apple erbij moeten installeren. En dan heb je een programma dat voor een Macgebruiker waarschijnlijk niet lekker aanvoelt, omdat het allerlei Linux-conventies gebruikt die niet goed „passen” op een Mac.

    trail versies

    Die vormen een pad in de rimboe?;)

    Oke, dus als ik het goed begrijp is het beter om vector-afbeeldingen te maken dan pixel-afbeeldingen om te zetten naar vector-afbeeldingen?

    Hangt ervanaf wat je hebt en wat je nodig hebt. Ervaring is de beste leermeester, maar als het om zwart-witte icoontjes gaat dan denk ik inderdaad dat nieuw tekenen de makkelijkste optie is. Je kunt natuurlijk altijd eerst een programma het om laten zetten (en wat spelen met de instellingen) en kijken of de uitkomst voldoet aan je eisen.

    Ik zal eens even gaan kijken naar Sketch 3, en kijken hoe makkelijk het is om vector-afbeeldingen te maken.
    (Gewoon lijntjes trekken / punten plaatsen en fill geven neem ik aan?)

    Waarschijnlijk wel. Bedenk ook dat je paden bij elkaar op kunt tellen, van elkaar aftrekken, enz.: dan kun je bijvoorbeeld een holle rechthoek maken door er twee in elkaar te zetten, de binnenste van de buitenste af te trekken, en dan de totaalvorm een vulling mee te geven om maar wat te noemen.


    Bijdrager
    verwijderd-profiel

    Vector is best cool!:)

    Ik ben er even mee bezig gegaan om de icoontjes die ik tot nu toe heb om te zetten naar Vector. Gewoon handmatig.

    Ik heb nu dit gemaakt in Sketch: (1e afbeelding is het path, 2e afbeelding is hoe Sketch het path ziet als je het selecteert)


    Als ik hem nu dus exportable maak, dan gebeurt dat op de manier die je hier ziet. De punten vallen dus weg. Hoe kan ik dit oplossen?

    EDIT// Ik heb iets gevonden: borders op inside zetten ipv outside. Maar dan wordt die 21×21 terwijl die 20×20 moet zijn. Dus hij zet er een pixel witruimte onheen….


    Bijdrager
    Jakko Westerbeke

    Het lijkt me een handiger idee om je canvas, oftewel de totale afbeelding, een bepaalde grootte te geven en dan alles zo te tekenen dat het binnen dat canvas valt. Zo ziet dat er in Illustrator uit (het zwarte vierkant is de omtrek van het canvas,):


    Bijdrager
    Shmoo

    Je moet altijd werken in een artboard ( canvas ) – druk op A en dan krijg je aan de rechterkant een lijstje met mogelijke canvas-formaten kies er eentje uit die het gewenste formaat heeft of kies iets dat dicht bij het formaat zit dat jij moet hebben en pas daarna de width en height aan.

    Standaard 58 x 58 settings canvas gekozen.

    aangepaste canvas naar eigen formaat + hernoemd.

    Daarna kijk je aan de rechterkant waar je ook de width en height hebt aangepast bij export. ( druk op het plusje ) en op die manier vertel je tegen Sketch dat wanneer er geëxporteerd moet worden dat alles binnen dat 64×64 canvas geëxporteerd zal worden.

    Stel ik zou nu een cirkel maken en plaats deze cirkel iets buiten het canvas dan wordt tijdens het exporteren ook dat gedeelte buiten het canvas niet meegenomen in de exports.

    Zie de voorbeelden twee exports.
    64×64

    128×128


    Bijdrager
    Shmoo

    Als je niet zo goed bent in tekenen uit de losse pols met de pen tool omdat dit best wel een leercurve kent omgehad welk programma je kiest dan kun je ook online gaan zoeken naar gratis vector shapes die mensen delen en waar je gebruik van kunt maken. Zeker wanneer je icons gaat maken is dat handig.

    Sketch 3 kan normaal gewoon .eps bestanden openen en dan zou je een bestaande vector kunnen bewerken op deze manier.

14 berichten aan het bekijken - 1 tot 14 (van in totaal 14)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.