Share
Ben je in de stemming voor iets anders? Ik zal je begeleiden bij het ontwerpen van Stuff - horizontaal geörienteerde blog en portfolio. Zorg ervoor dat je Stuff online-versie bezoekt om het eindresultaat te zien!
Maak het 1300 x 800 px. Al die ruimte is niet echt nodig, maar het is goed om het panoramische karakter van het ontwerp te voelen terwijl we werken.
Maak een nieuwe opvullaag met de effen kleur # bfc6cd
Zet een nieuwe laag om in een "slim object" (klik met de rechtermuisknop> Omzetten in slim filter) en pas het filter toe> Voeg ruis toe (u kunt het later aanpassen indien nodig dankzij de slimme-filtersfunctie). Zet de laag op slot. Om het project schoon en georganiseerd te houden, kunt u het masker van de laag verwijderen en het de standaard achtergrondlaag maken (optioneel).
Maak een nieuwe pijlvorm met behulp van de voorinstelling "Vormgereedschap". Gebruik vervolgens de vorm van het gereedschap Direct selecteren om het er leuk uit te laten zien (verplaats de punten naar wens).
Selecteer het gereedschap Vrije transformatie, verplaats de pijl 310 px van boven en pak en verplaats de horizontale liniaal om een nieuwe gids te maken. Klik hem in het midden van de pijl. Vanaf nu vertegenwoordigt het de hoofd horizontale as van de site.
Voeg 4 stijlen aan de pijl toe (door te dubbelklikken op de laag): slagschaduw, binnenschaduw, buitenste gloed en verloopoverlay (van #cbcbcb tot #ffffff).
Voeg een nieuwe tekstlaag toe boven de pijllaag.
Stijlen aan tekst toevoegen: innerlijke schaduw, verloopoverlay en lijn. Voor een beter dieptewerking, maakt u de streek alleen zichtbaar op de onderste helft van de tekst door een "verloop" -streep te gebruiken waarbij de alpha-instellingen van de bovenste helft op "0" staan.
Buiten- en binnenschaduwen geven de pijl meer 3D-weergave, maar om het nog beter te maken, laten we een eenvoudig, glanzend lichteffect maken. Maak een nieuwe rechthoek en gebruik het gereedschap Wisselpunt om de vorm aan te passen om een lichte kromming te creëren. We maskeren dit over de pijl-laag om een glanzend effect te creëren.
Stel deze laagvulling in op 0% en voeg een overlaystijl met verloop toe met subtiel verdwijnend wit.
Om te voorkomen dat de lichte laag voorbij de pijl gaat: ctrl + klik op de pijllaag om een selectie te maken laagmasker toevoegen aan de lichte laag
Als je de aandacht van kijkers op het logo wilt richten, maak dan een licht om de pijl uit de achtergrond te houden. U kunt een primitieve methode gebruiken die is:
Maak een witte rechthoek met een breedte van 240 px (de hoogte moet iets groter zijn dan het document).
Maak boven de foto een nieuw tekstvak en vul het met de blogtitel. Gebruik een gecomprimeerd lettertype zoals League Gothic (gratis bij de League of Moveable Type). Maak onder de foto nog een nieuw tekstvak voor de algemene inhoud.
Maak een selectie voor de inhoud en maak een nieuwe maskerlaag voor de grote rechthoek. Verander de maskerdichtheid in 80%
Voeg de buitenste (zwarte) en binnenste (witte) gloedstijlen toe aan de striplaag voor meer 3D-weergave.
Voeg meta-infotekst toe boven het bericht. Ik heb 12px Georgia cursief, 17px lijnhoogte gebruikt. Vergeet niet om gidsen te gebruiken om teksten op één lijn te houden
Maak een "lees meer" -tekst onder het bericht
Eén laag eronder, maak een nieuwe rechthoek om een lees meer knop te zijn.
Gradiënt- en lijnstijlen eraan toevoegen. Tip: maak de stook naar binnen, om perfect scherpe hoeken van de knop te hebben
Voeg ook een subtiel verloop toe aan de tekstlaag.
Om de badge te maken, gebruikt u een andere rechthoek, voegt u tekst toe (ik heb Arial gebruikt) en roteert u beide lagen 45 graden samen.
Masker toevoegen aan rechthoeklaag om onnodige hoeken te verbergen
... en voeg 2 kleine rechthoeken toe als een illusie van de badge die onder de afbeelding valt.
Voeg een subtiele schaduw toe aan de badge. Tip: gebruik voor de overvloeimodus voor schaduwen Normaal in plaats van standaard vermenigvuldigen, dus het wordt van kracht, zelfs als u de badge als transparant PNG-bestand gebruikt
Maak een nieuwe tekstlaag. In plaats van zwarte kleur (die onnatuurlijk kan aanvoelen op een lichte achtergrond), gebruik je donkergrijs om een natuurlijkere uitstraling te krijgen.
Tip: als u horizontale lijnen wilt maken in plaats van lijntool te gebruiken, maakt u geen anti-aliased tekst met onderstreepte glyph "_". Het zal altijd pixelscherp zijn en de spaties tussen de lijnen zullen gemakkelijk te regelen zijn dankzij de regelhoogte-parameter. Gebruik dezelfde regelhoogte als in menutekst en maak zoveel regels als menu-items, min één. Maak de lijnen langer dan nodig.
Zet deze laagvulling op ongeveer 15% en voeg een witte schaduw toe.
Voeg masker toe aan de lijnenlaag en schilder met een zachte borstel erop om verdwijnende randen te bereiken.
Maak een rechthoek met afgeronde hoeken (3px) voor een zoekinvoer.
Voeg binnenschaduw toe aan het vak en vul de laag met 70%
Hierboven voegt u zoektekst toe en maakt u een aangepaste vorm als een submitpijl. Voeg binnenschaduw toe aan het vak en vul de laag met 70%
Daar voor dit doel vectorafbeeldingen worden aanbevolen, raad ik aan de benodigde logo's te vinden in de service www.brandsoftheworld.com. In de meeste gevallen is dit de snelste manier. Open het logo in de Illustrator, kopieer contouren en plak in Photoshop als vormen. Je kunt ook de buddy-iconen van Orman Clark gebruiken.
Stel de vulling van de laag in op 0% en voeg stijlen toe (slagschaduw, binnenschaduw en kleuroverlay) om de 3D-weergave te bereiken. Als u het logo in de actieve (verlichte) staat wilt krijgen, wijzigt u de kleur en intensiteit van de Color Overlay-stijl.
Kopieer deze stijl en kopieer naar andere logo's (klik met de rechtermuisknop op de laag / Laagstijl kopiëren)
Als u een opmerkingenvak wilt toevoegen, maakt u een nieuwe rechthoek met afgeronde hoeken ongeveer 520 px breed en voegt u de stijl Slagschaduw toe.
Selecteer het grootste deel en voeg masker toe aan deze laag.
Dupliceer de laag en keer het masker om. Maak de nieuwe laag vol 25%.
Schakel in de overvloei-instellingen de optie "Laagmasker effecten verbergen" in om inconsistentie in de schaduwlijn van beide lagen te voorkomen.
Maak een zwarte verticale lijn op de rand tussen deze vakken, zorg dat deze ook 25% vult en voeg 1px witte schaduw rechts toe.
Voeg een voorbeeld van een avatar en teksten toe met eerder gebruikte kleuren.
Creëer cirkelvorm en plak laagstijlen uit de logopijl. Knip de pijlvorm uit de cirkel met behulp van Aangepaste vorm en snijmodus.
Maak onder deze laag een nieuwe cirkel - dezelfde of een kleinere maat en plak de verloopstijl uit het logo. Tip: als een laag veel stijlen bevat en u er slechts één wilt kopiëren, kunt u de stijl slepen terwijl alt is ingedrukt en neerzetten op een andere laag.
Voeg licht toe (op dezelfde manier als hierboven aan de logopijl).
Als je een kleine verbetering wilt aanbrengen, die niemand zal opmerken, maak dan afzonderlijke lichten voor de knoop en het pijlvormige gat en beweeg de tweede iets naar beneden. En als je al twee afzonderlijke lampen hebt, kun je gemakkelijk (zonder extra maskering) de knop lichter maken om beter zichtbaar te zijn op de zeer heldere knop.
Selecteer alle knooplagen en maak er een slim object van.
Dupliceer de laag, beweeg en klap horizontaal. Als u nu een pijl bewerkt (slimme laag met dubbele klik), zullen beide veranderen.
Alle andere elementen kunnen worden gedaan door de bestaande elementen die we hebben ontworpen te kopiëren, plakken en van grootte te veranderen.
Tip: League Gothic-lettertype en andere coole freeware-lettertypen met webdesignervriendelijke licenties zijn te vinden op www.fontsquirrel.com
OK, dus je hebt PSD min of meer klaar en wil graag verder gaan. Aangezien Stuff een andere benadering van inhoud nodig heeft, vanwege zijn horizontale karakter, is het erg lastig om deze goed te coderen. Ik ken niet veel horizontale websites die veelvoorkomende fouten hebben voorkomen (bijvoorbeeld niet werken met muisrollen). Laat een reactie achter als je wilt weten wat de beste manieren zijn om dit ontwerp te coderen en we zullen zien of we de tutorial niet naar de site kunnen brengen!
Hoe dan ook, als u wat tijd wilt besparen en alles op het verzilverd plaatje wilt hebben, kunt u HTML-sjabloon of WordPress-versie van Stuff voor een paar dollar downloaden. Bedankt!
Accentsconagua