Welkom bij TheHotSeat, pseudoniem voor een Gentse freelance webontwikkelaar. Maar bovenal een blog over webdesign, webontwikkeling en (digitale) vormgeving

view comments

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:

een formulierveld schalen zonder content-aware scaling in Photoshop

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:

een formulierveld schalen met content-aware scaling in Photoshop

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.


Gelijkaardige blog posts

9 reacties op dit bericht

1
Geert schreef op 23 jun 2009 om 22u49:

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.


2
Bart schreef op 23 jun 2009 om 23u56:

Photoshop dient om foto’s te bewerken.
Websites ontwerp je in Fireworks.
Met 9 slice scaling in Firefox bereik je hetzelfde.


3
Bart schreef op 23 jun 2009 om 23u57:

Correctie op vorige comment: Firefox > Fireworks.


4
Thomas schreef op 24 jun 2009 om 10u15:

@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.


5
Toon schreef op 24 jun 2009 om 11u18:

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.


6
Thomas schreef op 24 jun 2009 om 15u50:

Thanks Toon, wat je zegt houdt steek.


7
Wolf schreef op 25 jun 2009 om 21u33:

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)


8
Michel schreef op 30 jun 2009 om 12u02:

Goede tip! Maar werkt dit ook bij transformatie in verhouding van vormen met bijvoorbeelde ronde hoeken? *ga het meteen ff testen*


9
Thomas schreef op 1 jul 2009 om 10u04:

@Wolf—right!
@Michel—ja, dat lukt!


Plaats een reactie

Reageren is niet mogelijk op dit bericht.


Over logo TheHotSeat 

foto Thomas Byttebier pijltje 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

Laatste reacties

Categorieën

AlleExpressionEngineiPhoneTransistorMarketingSEOOntwerpTypografieOntwikkelingjQueryPHPZend FrameworkOpiniesOverigePhotoshopWebomgeving