Share
Wat je gaat creërenIn deze tutorial doorlopen we het stapsgewijze proces van het maken van een eenvoudig, op foto's gebaseerd Tumblr dagboekthema in Photoshop. Ik start helemaal opnieuw en begeleid je door het hele proces van het opstellen van het document, gebruik een paar basisgereedschappen en het ontwerp in een mum van tijd. Het doel van deze zelfstudie is om te laten zien hoe sommige ontwerpbeslissingen worden genomen en hoe het uiteindelijke ontwerp tot leven komt.
Om te kunnen volgen, heb je een aantal (gratis beschikbare) middelen nodig:
Begin met het maken van een nieuw Photoshop-document (Bestand> Nieuw ... ) met behulp van de hieronder getoonde instellingen. Je bent vrij om een canvas te gebruiken van elke gewenste dimensie - het web heeft immers geen vaste breedte.
Laten we een aantal hulplijnen instellen, zodat onze lay-out voldoende ruimte heeft en er in evenwicht uit ziet. Ik gebruik niet altijd een voorgedefinieerd raster, maar het instellen van enkele richtlijnen zorgt voor netheid en zal helpen om de breedte van onze website te bepalen. Ga naar Bekijken> Nieuwe gids ... en stel een aantal richtlijnen. Ik kies meestal 1000px als een website-breedte en voeg een aantal richtlijnen toe vanuit de hoeken, zodat er ruimte is om te ademen.
Notitie: Richtlijnen gebruikt voor deze tutorial: verticaal op 100px, 600px, 720px en 1100px.
Tip: U kunt ook de GuideGuide Photoshop-plug-in gebruiken om dit proces nog sneller te maken.
De koptekst of het gebied "boven de vouw" (waar dat ook is) speelt een zeer belangrijke rol bij het contact maken met gebruikers en ervoor zorgen dat bezoekers op de website blijven. Voor het fotoagenda van deze reiziger zal ik een prachtige foto van het strandlandschap gebruiken om de avontuurlijke stemming in te stellen en onbewust een bericht sturen voor de bezoekers die zeggen dat dit een website is die gaat over reizen.
Laten we eerst een groep maken genaamd "Header" voor de header door te klikken op Laag> Nieuw> Groep ... of op het kleine pictogram onderaan het lagenpaneel.
Laten we aan de slag gaan en navigatie boven aan ons dagboek zetten, zodat mensen er gemakkelijk doorheen kunnen navigeren. Selecteer de Horizontaal tekstgereedschap (T), Kiezen PT Sans doopvont 13px formaat, stel de kleur in op donkergrijs # 323232 en voer de naam van uw fotodagboek in. Dit is een geschikte plaats voor ons logo, dus gooi er een in als je die hebt. Ik gebruik een fictieve naam voor dit foto-dagboek "Boarding Gate". Om het visueel aantrekkelijker te maken, breidt u het bijhouden (de afstand tussen letters) tot 200.
Zorg ervoor dat je wat ruimte overlaat voor de titel hierboven, ik heb het naar beneden verplaatst 25px.
Accentsconagua
# 666666. Plaats het in de rechterbovenhoek vlak voor de laatste verticale richtlijn.
Teken in de groep "Koptekst" een rechthoekvorm (gebruik een andere kleur dan wit om deze zichtbaar te maken) met behulp van de Rechthoekgereedschap (U). In mijn geval heb ik een rechthoek van 1200x640 pixels getekend en deze bovenaan het document geplaatst met een opening van 25 px onder de navigatie bovenaan.
Download nu deze strandfoto (of een andere die je leuk vindt), sleep hem naar het Photoshop-document en plaats hem boven de rechthoeklaag. Hernoem de afbeeldingslaag naar iets dat je later zult herkennen, in mijn geval heb ik IMG gebruikt. Houd daarna de alt toets en muis over de fotolaag totdat u een kleine pijl naar beneden ziet wijzen en laat deze vervolgens los. U hebt zojuist een gemaakt Knipmasker. Eindelijk de IMG-laag verkleinen ondoorzichtigheid naar 75% om ervoor te zorgen dat de tekst die we bovenaan plaatsen, beter leesbaar is.
Nu slaan CMD + T en wijzig het formaat van de foto om aan uw behoeften te voldoen.
Tip: ingedrukt houden Verschuiving sleutel om proportioneel te transformeren.
Laten we een inleidend bericht maken waarin gebruikers worden verteld waar dit allemaal over gaat. Zorg ervoor dat u grote tekst gebruikt om de aandacht van bezoekers te trekken. In mijn geval is het hetzelfde PT Sans doopvont, 52px grootte. Gebruik voor een secundair bericht een kleiner lettertype dat ik heb gebruikt PT Serif 28px grootte. Let op de ruimte tussen de regels, laat altijd voldoende ruimte vrij om kopiëren leesbaar te maken.
Ten slotte hebben we een call-to-action (CTA) -knop nodig om mensen te vertellen wat ze moeten doen. Kies het Rechthoekgereedschap (U) en teken een wit #FFFFFF rechthoekige vorm. Plaats vervolgens de tekst in de witte rechthoek en zeg iets als "Door foto's bladeren". Zorg ervoor dat u wat ruimte boven de knop vrijlaat zodat deze er sterk en onafhankelijk uitziet.
Zoals u wellicht al weet, heeft Tumblr veel verschillende berichttypen beschikbaar. Hieronder ziet u een screenshot van de dashboardinterface van Tumblr met mogelijke berichttypen die u kunt maken.
In de komende stappen zal ik je begeleiden bij het maken van een aantal verschillende berichttypen, namelijk:
Ik zal je verlaten om de rest als een opdracht af te maken.
Laten we beginnen met het invoeren van de tekst eerst. We zullen één eenheid maken en deze vervolgens voor de andere berichttypen reproduceren. Alle berichten zijn gebaseerd op dezelfde structuur en delen vergelijkbare functies (datum van post, tags, delen opties).
Maak een nieuwe groep met de naam "Teksteenheid". Verander daarna de achtergrondkleur in lichtbruin # f8f7f6, kies het Rechthoekgereedschap (U) en teken een rechthoekige vorm tussen de eerste en laatste verticale richtlijnen. In mijn voorbeeld is de rechthoek 1000x284px.
Grijp de Horizontaal tekstgereedschap (T) en gebruiken PT Sans (Bold) 32px voer een kop in. Zorg ervoor dat je je titel wat ruimte geeft om het er gebalanceerd en schoon uit te laten zien. In mijn geval heb ik het van boven naar beneden 50px geduwd.
Gebruik dezelfde tool pick PT Serif lettertype, verklein de lettergrootte naar 15px en verander de kleur in lichter grijs # 444444. Voer daarna uw berichtcontent in. Zorg ervoor dat u de lijnhoogte vergroot om deze beter leesbaar en visueel aantrekkelijk te maken. In dit geval heb ik de lijnhoogte ingesteld op 26 px.
Ten slotte moeten we de publicatiedatum naast weergeven, met enkele tags en opties voor delen. Gebruik hetzelfde type gereedschap om een aantal tags in te voeren, elk voorafgegaan door een hashtag #, en plaats het onder de inhoud. Verander daarna de kleur naar lichtgrijs # 666666 dus het is visueel lichter en geeft de indruk minder belangrijk te zijn, waardoor er meer aandacht is voor de hoofdinhoud.
Ga nu naar Iconfinder en download de pictogrammen voor delen, retweet en hart.
Maak ten slotte een nieuwe groep met de naam "Pictogrammen" en plaats de pictogrammen in de groep. Breng wat ruimte aan op de zijkanten en verklein de groep ondoorzichtigheid naar 30% dus de pictogrammen komen overeen met de datum en de kleur van de tags.
Als dat is gebeurd, dupliceert u de groep "Teksteenheid" en geeft u deze de naam "Fotoeenheid". Verplaats hem 60px onder het eerste blok, verwijder de inhoudlaag en verplaats de titel van het bericht naar onder om in overeenstemming te zijn met de datum en tags. Wijzig de titel, datum en tags van het bericht. Selecteer de achtergrondlaag van de eenheid, druk op CMD + T en pas het formaat aan om 50px ruimte boven en onder te hebben.
Dupliceer de achtergrondlaag van de eenheid en wijzig de grootte met behulp van CMD + T. In mijn geval heb ik het formaat gewijzigd naar 1000x510 px.
Verplaats het boven de titel en ga naar Skitterphoto om een foto te kiezen die je wilt gebruiken voor de fotopost, plaats hem boven de rechthoek. Houd ingedrukt alt toets en muis over de laagminiatuur totdat u een kleine pijl ziet die naar beneden wijst. Laat de muis los om een te maken Knipmasker.
Deze is gemakkelijk. Duplicaat CMD + J de "Photo Unit" -groep en hernoem het naar "Video Unit". Verplaats hem 60px onder de fotopost en verander de afbeelding, titel, datum en tags. Daarna moeten we aangeven dat het een videopost is door er een YouTube-pictogram over te plaatsen.
Download het YouTube-pictogram van Iconfinder en plaats het in het midden van de videopost-afbeelding.
Nogmaals dupliceren (CMD + J) de groep "Teksteenheid" en verplaats deze onder de videopost. Verwijder de titel- en inhoudslagen met de datum, labels en pictogrammen voor delen.
Neem daarna de Horizontaal tekstgereedschap (T), Kiezen PT Serif (cursief) doopvont, grootte instellen op 35px en zorg ervoor dat de kleur donkergrijs is # 323232.
Plak tenslotte je favoriete citaat en pas de achtergrond eromheen aan, denk eraan om consistente 50px spleten aan de zijkanten achter te laten.
Dupliceer nu de "Photo Unit" -groep en plaats deze onder de quote-post, zodat onze mockup meer op een echte Tumblr-blog lijkt.
Daar ben je. Ik heb je laten zien hoe je tekst-, foto-, video- en citaat-berichttypen kunt maken en nu is het tijd om de rest van de berichttypen voor link, chat en audio te maken. Consistentie is de sleutel, probeer elementen die we al hebben gemaakt opnieuw te gebruiken en gebruik dezelfde lettertypen, kleuren en spatiëring, zodat uw ontwerp er uitgebalanceerd uitziet en als geheel wordt waargenomen.
We zijn bijna klaar met het afronden van dit eenvoudige Tumblr-thema. Laten we nu een knop "meer laden" toevoegen (iets dat veel voorkomt in Tumblr-thema's) en een copyrightverklaring.
Minimaliseer alle groepen en maak een nieuwe aan met de naam "Voettekst". Open daarna de "Header" -groep en vind de "Blader door foto's" -knooplagen, de rechthoekvorm en de tekstlaag. Houd de toets ingedrukt CMD toets en selecteer beide lagen en druk vervolgens op CMD + J om ze te dupliceren en naar uw "Voettekst" -groep te slepen.
Als u klaar bent, dubbelklikt u op de rechthoekige vormlaag en wijzigt u de kleur in de laag die wordt gebruikt voor de "Foto" -achtergrond om de consistentie te behouden.
Voer tot slot de copyrightinformatie in. Gebruik voor consistentie hetzelfde lettertype als gebruikt voor de kopie van de foto-invoer. In dit geval is het dat PT Serif 15px kleur grijs # 444444. Let op de afstand, in de hele lay-out hebben we veel witte ruimte die dit gevoel van netheid en organisatie geeft. Ik heb 60 px gebruikt voor spaties tussen de foto-items, de knop 'Meer laden' en de auteursrechtlijn.
De uitlijning is gecentreerd om de zaken consistent te houden met de berichten- en call-to-action (CTA) -knoppen.
Dat is het! We zijn klaar met het themaontwerp, bekijken nu uw documentlagen, verwijderen de onnodige en leggen het over aan uw ontwikkelaar, of nog beter zelf coderen. In een komende tutorial zullen we dit ontwerp coderen voor een volledig functioneel Tumblr-thema, dus houd het in de gaten!
