Ontwerp een Forest Geïnspireerd Tumblr-thema in Photoshop
Tumblr is een microbloggingplatform waarmee gebruikers eenvoudig informatiefragmenten op internet kunnen publiceren, zoals een foto- of fotoset, een video, een citaat of gewoon een alinea.
Het wordt vaak gebruikt als een online dagboek vanwege het gebruiksgemak in vergelijking met andere blogplatforms zoals WordPress.
Er zijn veel Tumblr-thema's beschikbaar, zowel gratis als premium, maar heb je je ooit afgevraagd hoe je je eigen ontwerpen zou gaan ontwerpen?
In deze tutorial leer je hoe je een op het bos geïnspireerde Tumblr-thema maakt, gebruikmakend van houtstructuren, subtiele patronen en moderne technieken - een mooie mix van natuurlijke en moderne elementen.
Wat we gaan ontwerpen
Het thema dat we in Photoshop gaan ontwerpen, bestaat uit vier gebieden: houten zijbalk, hoofdinhoudsgebied, rechterzijbalk en koptekst.
Stap 1
De eerste stap, zoals bij alle dingen die u ontwerpt, is de schetsfase. Met behulp van mijn grafische tablet van Wacom Bamboo en een leeg canvas in Photoshop, schetste ik het volgende ontwerp, met enkele grotere elementen, gewoon om mijn ideeën op (digitaal) papier te krijgen.
Stap 2
Maak een nieuw document in Photoshop met het idee weggeruimd. (Houd in gedachten dat dit niet in steen gebeiteld is.) Het is gewoon iets waar je naar terug kunt verwijzen als je vast komt te zitten in het ontwerp. Zelf heb ik de neiging om te experimenteren en veel te veranderen van wat ik aanvankelijk had gepland.) Ik gebruikte het volgende instellingen in Photoshop:
Stap 3
De volgende fase is om een aantal gidsen op het canvas neer te zetten. Dit helpt je om de structuur van het thema netjes te houden terwijl je het ontwerpt. Ik wil dat de linkerzijbalk 200 pixels is, het hoofdinhoudsgebied 600 pixels en de rechterzijbalk 160 pixels, wat ons een breedte van 960 pixels geeft.
Als u dezelfde instellingen hebt gebruikt, kunt u uw hulplijnen horizontaal op 200, 800 en 960 pixels plaatsen. Dit ontwerp wordt links uitgelijnd, zodat de houten zijbalk altijd tegen de linkerkant van het kijkvenster van de gebruiker ligt.
Ik plaatste ook geleidingen 200 pixels onder de bovenkant van het canvas en 200 pixels boven de onderkant van het canvas. Dit is hoe mijn document er momenteel uitziet:
Stap 4
Laten we nu een patroon toevoegen aan onze achtergrond. Ga naar Bestand → Nieuw en maak een nieuw document van 8 × 8 pixels. Teken enkele verticale lijnen met een breedte van 2 pixels. Uw canvas moet nu 2 pixels zwart, 2 pixels wit, 2 pixels zwart, 2 pixels wit zijn. Ga naar Bewerken → Patroon definiëren. Sla je patroon op als 'Verticale lijnen 2px'.
Ga in je originele document naar Laag → Nieuwe opvullaag → Patroon. Selecteer het patroon dat u zojuist hebt gemaakt en klik op OK. Zet de dekking van de laag weg totdat het er ongeveer zo uitziet:
Voeg het patroon samen met je achtergrondlaag en raster het automatisch in het proces. Ga naar Filter → Ruis → Ruis toevoegen. Wijzig de waarde in 5% en klik op OK. Dit voegt een subtiele textuur aan de achtergrond toe:
Maak een nieuwe laag en vul deze met wit. Plaats deze onder de originele achtergrondlaag. Verlaag de dekking van je gestructureerde laagpatroon tot ongeveer 40% en voeg het vervolgens samen met de achtergrondlaag toe door naar Laag → Lagen samenvoegen te gaan.
Stap 5
Selecteer het gereedschap Rechthoek en teken een vorm die 200 pixels breed is.
We zullen de onderkant van onze vorm afsnijden met de veelhoekige lasso-tool, waardoor het eruit ziet als een lint. Maak een selectie over uw vorm, rooster de vormlaag en druk op de Delete-toets om het geselecteerde gebied te verwijderen.
Plaats de vorm in het linker zijbalkgebied dat we hebben gemarkeerd met behulp van onze handleidingen.
Maak een selectie van het bovenste gedeelte van de vorm en ga naar Bewerken → Vrije transformatie. Rek de vorm uit zodat deze overlapt met de bovenste lijn van het canvas.
Stap 6
Selecteer het ovaalvormgereedschap en teken de cirkel met wit gevuld door de Shift-toets ingedrukt te houden om deze rond te houden. Plaats het boven in de zijbalk en hernoem de laag naar 'Portret'.
Klik met de rechtermuisknop op de nieuwe vormlaag en selecteer de laag "Rasterlaag" om deze van een slim object in pixels om te zetten. Houd de Command-toets ingedrukt en klik op de voorbeeldafbeelding van de laag in het deelvenster Lagen. Dit maakt een selectie van je cirkel.
Zoek een foto van jezelf (of waar je website over gaat) en kopieer deze. Ga terug naar Photoshop en ga met de cirkelselectie nog steeds naar Bewerken → Plakken in. Hiermee plakt u het object in uw cirkelselectie.
Nadat u dit hebt gedaan, hebt u automatisch een laagmasker op de afbeelding gemaakt (dwz op een nieuwe laag, niet op de bestaande cirkellaag). Ga naar Bewerken → Vrije transformatie om het formaat van de afbeelding te wijzigen en / of te roteren. Het zal een cirkel blijven; zorg ervoor dat je het niet te klein maakt. Als dat is gebeurd, verwijdert u de laag met de naam "Portret" en hernoemt u uw nieuwe laag.
Stap 7
Selecteer het gereedschap Tekst en maak een tekstvak in het koptekstgedeelte. Ik heb mijn thema een volledig willekeurige naam gegeven: "Kabooom." Ik gebruikte een lettertype met de naam Reklame Script. U kunt een demo van het lettertype downloaden of deze voor $ 30 kopen MyFonts .
Klik met de rechtermuisknop op uw tekstlaag en selecteer "Overvloeimogelijkheden". Pas een kleuroverlay toe op de tekst. Ik heb een lichtgrijs gebruikt die een beetje donkerder is dan de achtergrond, met de hexadecimale code # D6D6D6.
Breng een binnenschaduw op het type aan met een dekking van 10%, een afstand van 2 pixels en een grootte van 1 pixel. Laat de rest op 0 staan. Hierdoor ziet het type er uit alsof het op de achtergrond is gegraveerd.
Om het gegraveerde effect te voltooien, voegen we een slagschaduw toe aan het type, met de kleur wit met een normale overvloeimodus. Geef de schaduw een afstand van 2 pixels en een grootte van 1 pixel. Met deze instellingen wordt de schaduw weergegeven als een markering onderaan het type, waardoor meer diepte aan het type wordt toegevoegd en de innerlijke schaduw wordt versterkt.
Stap 8
Selecteer het gereedschap Tekst opnieuw en maak een tekstvak dat de breedte van de rechterzijbalk vult, die we hebben gemarkeerd met hulplijnen. Zet een verscheidenheid aan categorieën onder de categoriekop, zoals hieronder te zien:
Selecteer de categoriekop en wijzig het lettertype in een van uw keuze. Ik heb Minion Pro gebruikt. Experimenteer met sublettertypen (vet, cursief, enz.) En puntgrootten.
Verander het lettertype voor de categorieën ("Nieuws", "Dag uit", "Fotografie", enz.) Ik gebruikte Myriad Pro. Verlaag de puntgrootte van het type en pas de invoer aan (dwz de ruimte tussen de tekstregels), zodat de bovenste regel lager ligt dan waar deze standaard is.
Kopieer de eerste kop en de links en plak ze hieronder in hetzelfde tekstvak. Wijzig de kop en categorieën. Ik heb de kopjes 'Mijn projecten' en 'Mijn vrienden' gebruikt. Gebruik uiteraard alles wat relevant is voor uw website.
Stap 9
We gaan de tekst in de rechterzijbalk nu een beetje aantrekkelijker maken. Selecteer de tekst voor subcategorieën (dus niet de koppen) en verander de kleur van zwart in een donkergrijs. Ik gebruikte # 333333. Klik OK.
Klik met de rechtermuisknop op de tekstlaag en selecteer "Overvloeimogelijkheden". Pas een witte slagschaduw toe met een normale overvloeimodus. Verander de hoek naar 120 ° en de afstand en de grootte naar 1 pixel. Laat al het andere ingesteld op 0 pixels. Hiermee wordt een hoogtepunt aan de onderkant van de tekst toegevoegd, net zoals we dat bij de kop hebben gedaan.
Stap 10
Selecteer het gereedschap Lijn en houd de Shift-toets ingedrukt om het recht te houden en teken een lijn onder de kop 'Categorieën'.
Klik met de rechtermuisknop op de lijnlaag en selecteer "Overvloeimogelijkheden". Pas een witte slagschaduw toe met een normale overvloeimodus. Stel de hoek in op 90 ° en de afstand tot 1 pixel. Stel de rest in op 0 pixels.
Dupliceer de lijnlaag en plaats deze onder elk van de koppen.
Stap 11
Als je hetzelfde aantal koppen hebt als ik, dan zou je drie lijnlagen moeten hebben. Selecteer ze allemaal en dupliceer ze. Terwijl de drie lijnlagen nog steeds zijn geselecteerd, duwt u ze 10 pixels omlaag door de Shift-toets ingedrukt te houden en eenmaal op de toets Omlaag te drukken. Verlaag de dekking van je nieuwere lijnlagen tot 25% om zoiets als dit te krijgen:
Stap 12
Pak het gereedschap Rechthoekvorm en teken een rechthoek die lijkt op wat eronder staat. Maak de rechthoek precies 570 pixels breed. Dit zorgt voor een opening van 10 pixels tussen de linkerzijbalk en de rand van de nieuwe rechthoek en een opening van 20 pixels tussen de rechterzijbalk en de rand van de nieuwe rechthoek, zoals te zien in de geannoteerde schermafbeelding hieronder:
Stap 13
Selecteer het gereedschap Rechthoekvorm opnieuw en maak een veel kleinere grijze rechthoek, zoals hieronder. Plaats deze in de rechterbovenhoek van de grote rechthoek, verschoven ten opzichte van de grote rechthoek met 10 pixels. Plaats de vorm 30 pixels weg van de bovenkant van de rechthoek.
Stap 14
Dupliceer de typelaag in de rechterzijbalk en gebruik de Shift-toets en cursortoetscombinatie om de gedupliceerde tekstlaag over het hoofdinhoudsgebied te duwen. Doe hetzelfde met de twee regellagen voor uw rubriek "Categorieën".
Selecteer het gereedschap Tekst en klik op de gedupliceerde tekstlaag. Verwijder alle tekst in het vak en verander de kop in iets dat meer geschikt is. Ik heb hier alleen wat dummy-tekst gebruikt: "Dit hier is een titel."
Stap 15
Ga naar Bestand → Plaatsen en zoek een foto om in het document te plaatsen als tijdelijke aanduiding. Het gebruik van echte afbeeldingen is hier altijd het beste omdat ze de mock-up er echt en aantrekkelijker uit laten zien. Ik gebruikte een foto van mijn zus .
Ga naar Bewerken → Vrije transformatie om de grootte van de foto te verkleinen en op de juiste plaats te plaatsen. Maak het in totaal 20 pixels korter in zowel de breedte als de hoogte zodat het mooi in de zwarte rechthoek past, zoals:
Stap 16
Open de overvloeiopties voor de grote zwarte rechthoek. Breng een overlay met witte kleur en een slagschaduw aan met een dekking van 10% en een grootte van 3 pixels.
Stap 17
Selecteer nogmaals het gereedschap Rechthoekige vorm en teken een lange vorm onder de witte foto-achtergrondvorm. Zorg dat het dezelfde breedte heeft. Vul het met een lichtgrijs.
Open de overvloeiopties voor de nieuwe grijze rechthoek en pas een slagschaduw toe. Stel de kleur in op wit, met een normale overvloeimodus, de dekking op 100% en de afstand tot 1 pixel. Laat al het andere ingesteld op 0 pixels.
Breng ook een binnenschaduw aan met de kleur zwart, met een dekking van 10%. Wijzig de grootte in 13 pixels en laat al het andere ingesteld op 0 pixels. Door deze twee laagstijlen ziet de nieuwe vorm eruit alsof deze op de achtergrond is geëtst, zoals onze koptekst typografie:
Stap 18
Ga door naar de zijbalk, download een aantal herhalende houtstructuren. Ik gebruik een ingesteld van GraphicRiver dat omvat drie verschillende houtstructuren: licht, medium en donker.
Nadat u de patronen in Photoshop hebt geïnstalleerd (door elke afbeelding te openen en deze als een patroon te definiëren), selecteert u de zijbalk in uw Photoshop-document. Ga naar Laag → Nieuwe vullaag → Patroon. Selecteer een van uw houtstructuren (ik heb de mediumversie geselecteerd) en klik op OK. Door eerst de zijbalk te selecteren, moet het patroon alleen dat gebied vullen.
Klik met de rechtermuisknop op de patroonlaag en selecteer "Overvloeimogelijkheden". Pas een verloopoverlay toe, gaande van zwart naar transparant naar zwart:
Wijzig de dekking van de verloopoverlay tot 10% en geef deze een hoek van 0 °. Dit voegt een subtiele schaduw toe aan de zijbalk, waardoor het iets realistischer en minder vlak lijkt.
Pas ook een slagschaduw toe op de zijbalk. Zet de dekking op 30% en verander de hoek naar 180 °. Verander de afstand naar 1 pixels en de grootte naar 5 pixels, laat al het andere ingesteld op 0 pixels. Dit voegt een kleine en subtiele schaduw toe aan de zijbalk.
Stap 19
Open de "Overvloeimogelijkheden" voor het cirkelportret dat we aan het begin van deze tutorial hebben gemaakt. Pas een witte slagschaduw toe met behulp van de onderstaande instellingen:
Pas ook een innerlijke schaduw toe met behulp van de onderstaande instellingen. Hierdoor ziet het cirkelportret eruit alsof het in de boom is geplaatst, in plaats van erop te zitten.
Stap 20
Dupliceer de titellaag in de hoofdinhoud. Verplaats het naar de zijbalk en verander de tekst naar 'Over mij'. Herpositioneer en verklein ook de twee regels onder de kop.
Open de "overvloeiopties" voor je nieuwe tekstlaag en wijzig de slagschaduw-instellingen naar deze:
Voeg wat tekst toe aan het gedeelte 'Over mij', met hetzelfde lettertype en dezelfde grootte die we in de rechter zijbalktekst hebben gebruikt. Open de "overvloeimogelijkheden" voor deze nieuwe tekst en klik op het tabblad "Buitenste gloed" om een buitenste gloed toe te passen; verander de dekking naar 30%, de kleur naar wit en de maat naar 18 pixels.
Hierdoor wordt onze tekst leesbaarder tegen de houten achtergrond.
Speel rond met de lettergrootte om de tekst gemakkelijker te kunnen scannen.
Stap 21
Na wat experimenten, besloot ik dat de hele zijbalk er veel beter uitzag in het donker van de drie hierboven genoemde texturen. Ik heb het zijbalkpatroon en de kleuren van de tekst gewijzigd. Gebruik de technieken die je al hebt geleerd om dit te doen.
Hier is hoe mijn ontwerp er tot nu toe uitziet:
Stap 22
Hoe lang je ook van plan bent, je bent vast van plan om tijdens het ontwerpproces wijzigingen aan te brengen. Toen ik naar het ontwerp als geheel (in plaats van stukje bij beetje) keek, concludeerde ik dat 10 pixels tussen de zijbalken en het hoofdinhoudsgebied lang niet genoeg in de buurt was.
Gebruik de Shift-toets en de Cursor-toetscombinatie om uw inhoud aan te duwen, zodat de twee tussenruimten 40 pixels in plaats van 10 worden. Dit maakt het ontwerp bruikbaarder en aantrekkelijker.
Stap 23
Ik besloot ook om de stijl van de header van het thema te veranderen.
Wijzig de kleur (via een kleuroverlay in het venster "Overvloeimogelijkheden") naar een kleur die is geselecteerd in het cirkelportret. Ik nam een donkergroen blauw.
Ik heb ook de binnenschaduw verwijderd en de instellingen voor de slagschaduw gewijzigd, waardoor het lijkt alsof de kop boven de achtergrond staat in plaats van erin.
Stap 24
Als u doorgaat naar de hoofdinhoudsbanner (de rechthoek die we eerder hebben gemaakt en die zich in de rechterbovenhoek van het beeldgedeelte van onze hoofdinhoud bevindt), selecteert u de rechthoek door op het miniatuurvoorbeeld van de laag te klikken terwijl u de Command-toets ingedrukt houdt.
Ga naar Laag → Nieuwe opvullaag → Patroon en selecteer dezelfde structuur die je voor de zijbalk hebt gebruikt.
Klik met de rechtermuisknop op de patroonvullingslaag en selecteer de optie "Lagen rasteriseren". Gebruik de gereedschappen Ontdooien en Branden om de linker- en bovenkant van de vorm en schaduwen aan de rechter- en onderkant van de vorm toe te voegen.
Dit voegt diepte toe en geeft de vorm een licht driedimensionaal gevoel. Met het gereedschap Branden wordt de afbeelding donkerder, terwijl de Dodge-tool deze lichter maakt.
Selecteer het gereedschap Polygonal Lasso. Selecteer een vorm die lijkt op die hieronder en vul hem met een donkerbruine kleur, geselecteerd uit je textuur.
Gebruik het gereedschap Rechthoekige selectiekader om de gebieden in de nieuwe vorm te selecteren die u niet nodig hebt en druk op de toets Verwijderen om ze te verwijderen. Je zou moeten eindigen met iets soortgelijks als dit:
Stap 25
Grijp onze eigen exclusieve icon set "Reflectie" genoemd. We zullen verschillende van deze pictogrammen in ons ontwerp gebruiken.
Voeg de benodigde pictogrammen in het document in door naar Bestand → Plaatsen te gaan. Ik koos voor de pictogrammen camera, hart, herladen, bewerken en klok, die zullen dienen als mijn foto, zoals, reblog, notities en tijdpictogrammen in het thema.
Stap 26
Selecteer het camerapictogram en wijzig het formaat. Plaats het op de balk van het berichttype dat we zojuist hebben gemaakt. Pas hier een innerlijke en slagschaduw op toe, met instellingen die vergelijkbaar zijn met degene die we in deze zelfstudie hebben gebruikt.
Voeg wat typografie toe aan de balk met het berichttype. Ik heb hetzelfde Reklame-script gebruikt dat we in de kop hebben gebruikt en dezelfde overvloeiopties die we hebben gebruikt voor de koppen van de linkerzijbalk.
Stap 27
Selecteer de andere vier pictogramlagen. Klik met de rechtermuisknop en selecteer "Lagen routeren" om ze van slimme objecten naar pixelobjecten te veranderen.
Gebruik het gereedschap Rechthoekige selectiekader om alle reflecties van het pictogram te selecteren.
Druk op de Delete-toets op elk van de pictogramlagen om de reflectie ervan te verwijderen.
Stap 28
Selecteer alle vier pictogramlagen opnieuw. Ga naar Bewerken → Vrije transformatie en houd de Shift-toets ingedrukt om de pictogrammen in verhouding te houden, verkleinen hun formaat en plaats ze op de balk onder het hoofdinhoudsvak dat we eerder hebben gemaakt.
Spreid de pictogrammen gelijkmatig uit met de cursortoetsen.
Stap 29
Klik met de rechtermuisknop op de hartpictogramlaag en selecteer "Overvloeimogelijkheden" in het menu. Wijzig de kleur in lichtgrijs met een kleuroverlay en pas een innerlijke schaduw toe met behulp van de volgende instellingen:
Breng nu een slagschaduw aan met deze instellingen:
Nadat de instellingen op de hartpictogramlaag zijn toegepast, klikt u met de rechtermuisknop en selecteert u 'Laagstijlen kopiëren'. Selecteer alle vier pictogrammen opnieuw, klik met de rechtermuisknop en selecteer 'Plakstijlen plakken'. Alle pictogrammen in deze balk moeten nu de hetzelfde effect.
Stap 30
Selecteer het gereedschap Tekst en maak een klein tekstvak naast het hartpictogram. Typ 'Vind dit bericht leuk'. Pas een innerlijke schaduw en slagschaduw toe met instellingen die lijken op de instellingen die we in deze zelfstudie hebben gebruikt.
Herhaal de vorige stap voor de resterende pictogrammen met behulp van de volgende zinsdelen: "Reblog dit bericht", "" 1052-notities "en" Geplaatst op 19/03/2011. "Kopieer en plak dezelfde laagstijl op elke tekstlaag.
U kunt ook enkele van de pictogrammen met de nieuwe tekst verplaatsen, waarbij u ervoor zorgt dat de ruimte tussen de tekst en de pictogrammen consistent is; vanwege de verschillende tekstlengtes is dit mogelijk veranderd.
Stap 31
Dupliceer alle lagen in het hoofdinhoudsgebied en plaats ze onder het origineel. Wijzig de titel, afbeelding en berichttype rechthoek. Zoals gezegd, hoe realistischer de mock-up, hoe beter.
Stap 32
Kopieer de kop en tekst in de zijbalk en voeg enkele pictogrammen in. Ik gebruikte de uitstekende sociale media-iconen die bekend staan als Buddycons , een andere set exclusief voor Webdesigner Depot.
Het eindproduct
Na nog een aantal aanpassingen (ik verwijderde de gekartelde lintachtige snede onderaan de zijbalk), ben ik helemaal klaar! Hier is ons definitieve ontwerp, klaar om te worden gecodeerd of verzonden naar een ontwikkelaar om het te doen.
Deze tutorial is exclusief samengesteld voor Webdesigner Depot door Callum Chapman , een freelance user interface-ontwerper die handelt onder de naam Circlebox Creative . Callum werkt ook aan een inspiratie galerij project genaamd Vinspires.
Wilt u een andere zelfstudie bekijken over hoe u dit ontwerp kunt knippen en coderen in een volledig werkend Tumblr-thema?