Overslaan en naar de inhoud gaan

Ontwerpen in Photoshop, voelt achterhaald

Ontwerpen in Photoshop, voelt achterhaald

Nieuwe baan betekent nieuwe tools. In dit geval een laptopje met een retina scherm (hoge resolutie en pixel dichtheid). Een van de eerste klussen was het ontwerpen van een website. Vol goede moed begon ik te ontwerpen in Photoshop. En wat voelde het achterhaald. Een korte analyse na de eerste week werken voor Wunderkraut.

De scherpte

Font rendering in Photoshop is altijd een geworstel geweest. Je hebt keuze uit vijf verschillende antialias instellingen, op de Mac heb je er zelf nog eens twee bij. Geen van allen ziet er mooi uit. Het wordt pas helemaal leuk wanneer je de font rendering in Photoshop vergelijkt met die in de browser, alle verschillende tussen de browsers onderling daargelaten. Nu was dit al heel goed zichtbaar op een non-retina scherm, maar op een retina scherm is het een verschil van dag en nacht.

De snelheid

Wanneer eenmaal gewend bent om websites te ontwerpen in de browser kom je erachter dat Photoshop een stuk trager werkt dan je zou verwachten.

Stel je bent met een design bezig waarin je een grid van 16 blokken met afbeeldingen, titels en intro’s moet tonen. In Photoshop, wanneer je het goed doet, maak je per blok een map aan met daarin de layers. Deze kopieer je 15 keer en align je met je grid. Dat grid moet je overigens ook zelf bouwen met rulers (of laten maken met een grid calculator). Je voelt hem al aankomen dat wanneer je de font grootte van de titels wilt/moet aanpassen je dat 16x moet doen. Dat kan sneller.

In HTML (eigenlijk PHP) maak je één blok en die herhaal je 16 keer.

1
2
3
4
5
6
7
<?php for ($i = 0;$i < 16;$i++): ?>
  <div class="block">
    <img src="someimage.jpg">
    <h2>Some title</h2>
    <p>Some intro text</p>
  </div>
<?php endfor; ?>

Appeltje eitje eigenlijk. Moet hiervan de titel grootte aangepast worden, simpel, gewoon je stylesheet aanpassen. Wil je testen of de afbeelding boven de H2 beter is, dan hoef je niet alle layers in Photoshop af te gaan maar kan je het gewoon in één keer aanpassen. Wil je het testen met meer of minder blokken. Gewoon $i aanpassen in de for-loop. Als programmeur geloof ik heilig in DRY, Don’t Repeat Yourself. Merk je dat je dezelfde handelingen meerdere keren doet, versimpel het dan. PHP is dus eigenlijk een ideale prototyping tool. Snel, wendbaar en meteen een duidelijk en mooi resultaat.

Nu is dit alles wel (beperkt) mogelijk met Smart layers en het embedden van andere .psd’s of afbeeldingen. Dit kan bijvoorbeeld met File -> Place, hiermee kan je externe bronnen in je eigen canvas plaatsen. Dubbel klikken op de laag opent dan het bron bestand. Alle wijzigingen die daarin gemaakt worden, worden dan overal doorgevoerd.

Componenten

Webpagina’s bestaan uit componenten die samen de pagina definiëren. Wanneer je een webpagina ontwerpt in HTML kan je dus heel makkelijk losse bestandjes maken die deze componenten bevatten. Wanneer je eenmaal alle componenten hebt kan je vliegensvlug verschillende pagina’s in elkaar zetten of bestaande op een andere manier rangschikken bijvoorbeeld.

1
2
3
4
5
6
7
8
<div class="main-content">
  <?php include 'blocks/news.php'; ?>
  <?php include 'blocks/comments.php'; ?>
</div>
<div class="sidebar">
  <?php include 'blocks/login.php'; ?>
  <?php include 'blocks/banner.php'; ?>
</div>

Responsive

Dit kan een heel kort hoofdstuk worden. Kan gewoon niet in Photoshop. Tenminste niet in één scherm. Je moet dan voor elk breekpunt een nieuw ontwerp maken. Dit voelt gewoon niet goed. Responsive betekent dat de website reageert op de breedte die het heeft en daar de content voor aanpast. In Photoshop doe je eigenlijk precies het tegenovergestelde. Je probeert de content in de ruimte te proppen. Je raakt het gevoel van een “levende” website kwijt. Om maar nog niet te spreken over hover effecten en andere interactie met de website die je niet hebt met een plaatje.

Werkwijze

Terwijl sommige klanten nog steeds screenshots of comps verwachten kan je nog steeds ontwerpen in de browser. Er zijn handige plugins voor de browser die screenshots kunnen maken van een hele pagina. Waar je dus voorheen 3 schermen moest ontwerpen in Photoshop kan je nu simpel je browser scherm verkleinen en nog een screenshot maken om de tablet of telefoon variant te tonen. Dit scheelt ongelofelijk veel tijd.