Welkom bij TheHotSeat, pseudoniem voor een Gentse freelance webontwikkelaar. Maar bovenal een blog over webdesign, webontwikkeling en (digitale) vormgeving
Een Photoshoptip voor webdesigners
23 jun 2009•Sinds een paar weken werk ik met de nieuwste versie van Photoshop: CS4. Het programma heeft een aantal leuke nieuwigheden die vooral voor fotografen interessant kunnen zijn, zoals de mogelijkheid om lokale aanpassingen te doen op foto’s in Camera Raw.
Ook het nieuwe Content-aware scaling (of Zo schalen dat inhoud behouden blijft in het Nederlands) is erg handig wanneer je een foto buiten verhouding in een ontwerpje moet doen passen. Wie er nog niet van gehoord heeft moet zeker eens dit filmpje checken.
Vandaag ontdekte ik dat Content-aware scaling ook erg interessant kan zijn voor wie net als ik vaak websiteontwerpen maakt.
Ik werkte zopas aan een html-formulier en dan heb ik de gewoonte om standaard invulvelden via een screenshot in mijn ontwerp te plakken. En dan begint het natuurlijk: een textarea moet groter worden, een tekstveld moet smaller worden, een knop moet breder worden… vóór versie CS4 was dat vooral een vervelende kwestie van selecteren, verplaatsen, stukjes kopiëren en plakken. Want wie dat niet deed kwam uiteraard bedrogen uit:

Het invulveld hierboven is geschaald op de oude manier: via Bewerken > Transformatie > Schalen. Niet erg mooi en helemaal niet realistisch. Door Bewerken > Zo schalen dat inhoud behouden blijft (wat een naam voor een menu-item!) te gebruiken, kan je vrij makkelijk dit resultaat bekomen:

Dit ziet er wél scherp en realistisch uit! Ik ben verkocht. Nu is het nog aan pak makkelijker om formuliervelden tientallen keren te schalen terwijl het ontwerp vorm krijgt.
Tot slot nog een kleine tip: ik heb gemerkt dat het via Zo schalen dat inhoud behouden blijft beter is in stappen te schalen wanneer je een beduidend stuk groter of kleiner moet schalen. Probeer je het in 1 beweging dan durft Photoshop de randen wel eens een onrealistische wrong te geven.
Over
TheHotSeat is Thomas Byttebier, freelance webontwikkelaar en grafisch ontwerper.
Op deze website blog ik over alles wat met webdesign en digitale vormgeving te maken heeft. Meer informatie over mij.
RSS Feed TheHotSeatLaatste blog posts
- Upgraden naar ExpressionEngine 2.0
- Hoe het ontwerp van Transistor tot stand kwam
- Transistor: radio op de iPhone
- Over HTML5
- Scrollen in het oneindige
Laatste reacties
- Hendrik op Upgraden naar ExpressionEngine…
- Thomas Byttebier op Hoe het ontwerp van Transistor…
- Thomas Byttebier op Upgraden naar ExpressionEngine…
- Kevin op Upgraden naar ExpressionEngine…
- Frederik Severijns op Hoe het ontwerp van Transistor…
Categorieën
Alle • ExpressionEngine • iPhone • Transistor • Marketing • SEO • Ontwerp • Typografie • Ontwikkeling • jQuery • PHP • Zend Framework • Opinies • Overige • Photoshop • Webomgeving
Gelijkaardige blog posts
9 reacties op dit bericht
Laat content-aware scaling nu net een feature zijn van Photoshop CS4 Extended. En laat ik nu net het Design Standard (CS3) pakket hebben dat blijkbaar als enige met een soort “light” versie van Photoshop is opgezadeld. Jammer, want het lijkt me inderdaad wel handig en bruikbaar, in tegenstelling tot alle 3D-gerelateerde mikmak die je er dan ook bijkrijgt.
Photoshop dient om foto’s te bewerken.
Websites ontwerp je in Fireworks.
Met 9 slice scaling in Firefox bereik je hetzelfde.
Correctie op vorige comment: Firefox > Fireworks.
@Geert—Yep, dat zou goed kunnen. Ik heb alvast Photoshop Extended. Spijtig dat deze feature niet in de gewone Photoshopversie zit ingebakken. En om nu te upgraden enkel voor die content-aware scaling is misschien ook wat overdreven.
@Bart—bedankt voor de 9 slice scaling tip, check ik zeker eens. Ik ontwerp websites in het programma waar ik me het best bij voel. En momenteel is dat nog altijd Photoshop.
Fireworks is inderdaad veel beter geschikt om website layouts te maken. 9-slice scaling is perfect voor de doeleinden die je beschrijft. Bovendien zijn vectorieel- en bitmap-modes veel beter geïntegreerd, wat logisch is voor websites waar je vaak ‘vectorachtige’ vlakken combineert met meer fotografisch materiaal. Ik werk zelf al met Fireworks sinds versie 4.
Maar Photoshop is blijkbaar moeilijk om te verlaten, merk ik ook bij anderen. Gewoon de sprong eens wagen en doorbijten op een project waar je die tijdsinvestering kan veroorloven.
Thanks Toon, wat je zegt houdt steek.
Een tool is maar een tool, als je nu graag bitmaps inscant en je websites in Paint Shop Pro maakt, why not? Kies de tool waar je je het beste bij voelt.
(Dit gezegd zijnde: goede tip, en Photoshop voor websiteontwerp ftw)
Goede tip! Maar werkt dit ook bij transformatie in verhouding van vormen met bijvoorbeelde ronde hoeken? *ga het meteen ff testen*
@Wolf—right!
@Michel—ja, dat lukt!
Plaats een reactie
Reageren is niet mogelijk op dit bericht.