Tumblr-thema's maken met een PSD-ontwerp

Tumblr combineert de nadruk op visuele creativiteit met een postlengte die tussen de beknoptheid van Twitter en de open lengte van een traditioneel blogbericht in valt. Wanneer je een aangepast Tumblr-thema gebruikt dat het uiterlijk van je on- en offline identiteit uitbreidt, past een tumblelog in een strategie die andere online en sociale media omvat. Webontwerpers beginnen vaak met het ontwikkelen van aangepaste thema's in Adobe Photoshop, waarbij ze het gelaagde PSD-bestandsformaat van het programma als hun visuele werkruimte gebruiken.

Afmetingen vaststellen

De liniaalhulplijnen en gelaagdheid van Adobe Photoshop vereenvoudigen de taak van het maken van de basis van een Tumblr-thema, compleet met een lay-outraster dat de afmetingen van inhoudsgebieden definieert. Als u lagengroepen instelt voor elk aspect van uw ontwerp, inclusief het hoofdinhoudsgebied en de zijbalk, kunt u alle hulplijnen voor elk element op één enkele laag binnen elke groep plaatsen. Deze opstelling stelt u in staat uw gidsen selectief zichtbaar te maken, in plaats van ze allemaal te tonen en te verbergen met een Photoshop-sneltoets of menu-item, en houdt gerelateerde gidselementen bij elkaar. Geef uw groepen en lagen een naam om de functie van elk onderdeel van uw ontwerp te identificeren. De momenten die u investeert in incrementele naamgevingstaken werpen hun vruchten af ​​in de tijd die u niet hoeft te besteden aan het in- en uitschakelen van lagen om te bepalen wat ze bevatten. Om de afmetingen van een lay-outelement snel te vinden, drukt u op "F8" om het Info-paneel te openen en vervolgens op "Ctrl-klik" op de miniatuur van het deelvenster Lagen om een ​​selectie te laden op basis van de pixels op die laag.

Kleuren selecteren

Of u nu de beproefde Color Picker gebruikt om tinten voor uw thema te selecteren, opties uit een kleurenbibliotheek laadt om bij een gedrukt stuk of logo te passen, of vertrouwt op de Pipet-tool om tinten uit een ander bestand of afbeelding te proeven, Adobe Photoshop biedt een breed verschillende manieren om themakleuren te selecteren. Wanneer u een laag vult met een effen kleur om de achtergrondkleur van een Tumblr-thema of andere elementen van uw ontwerp te simuleren, kunt u de kleurformule kopiëren als tekst uit de hexuitlezing van de Kleurkiezer en de kleuridentificatie in de naam van de laag plakken voor snelle referentie. De zes alfanumerieke tekens in een hexadecimale kleur verschijnen zowel in Tumblr-code als in webontwerpen voor blogs en andere online formaten.

Afbeeldingen maken

De kop die een tumblelog identificeert, kan een bitmapafbeelding als een thematische afbeelding gebruiken. U kunt dit kritieke element maken met een combinatie van tekst en op pixel of vector gebaseerde elementen in uw PSD-bestand. Als de afbeelding aanpasbare elementen bevat die u in Photoshop hebt gezet, laat deze dan als live type in uw PSD-gebaseerde themabestand en raster ze alleen in kopieën van het bestand die u aan andere mensen verstrekt die geen licentie hebben voor de vereiste lettertypebestanden in je thema. Wanneer u vectorgereedschappen gebruikt om in Photoshop te tekenen, inclusief de pen- en vormgereedschappen, teken dan met hulplijnen die zijn uitgelijnd met de onderliggende resolutie van uw sjabloonbestand. Deze techniek helpt uw ​​illustraties zo scherp mogelijk te houden wanneer u gerasterde versies ervan opslaat of exporteert.

Volgende stappen

Als je weet hoe je HTML en CSS moet coderen en de gespecialiseerde variabelen begrijpt die Tumblr in zijn codestructuur gebruikt, kun je de afmetingen, kleurspecificaties en afbeeldingen die je in een PSD bouwt vertalen naar een werkend aangepast Tumblr-thema. Als webcodering buiten uw vaardigheden valt, kunt u uw PSD aan een programmeur geven om het thema voor u te produceren. Naast een visuele behandeling moet een Tumblr-thema variabelen en blokken bevatten. Variabelen accepteren dynamische waarden om standaard visuele elementen van Tumblr te maken. Blokken vormen stukjes code die variabelen combineren met HTML. Blokken zetten berichten op en de permalinks die ze bereiken, links die bewegen tussen brokken chronologisch georganiseerd materiaal en elementen die geschikt zijn voor de mensen die een individuele tumblelog leuk vinden of volgen.

Versie informatie

De informatie in dit artikel is van toepassing op Adobe Photoshop CC en Adobe Photoshop CS6. Het kan enigszins of aanzienlijk verschillen met andere versies of producten.