Share
Deze tutorial begeleidt u door het proces en ideeën achter het ontwerpen van een professionele website met een funky flair in Photoshop. De tutorial zal veel lezen als een roman "kies je eigen avontuur" in de hoop dat het je creativiteit en uniekheid in je ontwerp zal stimuleren met een beetje advies en instructies onderweg. Tijd voor avontuur!
Een ding dat je zal opvallen tijdens deze tutorial, is hoe gemakkelijk deze website kan worden omgezet in een blog over design, de startpagina van een softwarebedrijf of een open source community. Alle modules op de zijbalken rechts en links kunnen eenvoudig worden verwisseld en verplaatst en de inhoud is flexibel ontworpen.
Gedurende deze tutorial zul je grote nadruk leggen op de ontwerpprincipes en bruikbare Photoshop-methoden om je workflow en ontwerp van websites te verbeteren. Hoewel deze site een eigen stijl heeft, is het belangrijkste doel van deze tutorial niet om die stijl exact te repliceren, maar de hoop is dat je een beter perspectief krijgt op webdesign in Photoshop dat je aanpak kan verbeteren en je productie kan versnellen.
Bekijk de afbeelding die we gaan maken.
Als je dat nog niet bent, ga je naar 960.gs en maak je jezelf vertrouwd met het 960 rastersysteem en waarom het zo nuttig zal zijn voor deze tutorial. Zorg ervoor dat je de sjabloon downloadt terwijl je daar bent.
Nadat je het bestand hebt gedownload, pak je het uit en open je "960_grid_12_col.psd". Je vindt dit onder 960_download> Sjablonen> Photoshop. Wanneer u het bestand opent, zal duidelijk zijn hoe snel dit u in staat stelt om structuur te creëren en te behouden in uw webontwerpen. Let vooral op de richtlijnen, zodat u objecten kunt maken die perfect op het raster aansluiten.
Als u de hulplijnen volgt tot aan de liniaal, kunt u duidelijk de exacte pixelafmetingen van het raster zien - met 60px brede kolommen en 10px aan weerszijden (tussen elke kolom 20 px maken). Als u de liniaal niet ziet of er vanaf wilt komen, kunt u deze met Command + R omdraaien.
De gidsen zijn bijna overweldigend; als je eenmaal begint met ontwerpen, komen ze echt in de weg. U kunt ze schakelen door op Weergave> Extra's te klikken of eenvoudigweg de sneltoets Command + H te gebruiken.
Voor deze zelfstudie hebt u meer ruimte op uw canvas nodig. Breid het canvas uit (Command + Alt + C) tot 1400px met 1340px. U kunt alles behalve de achtergrondlaag verwijderen. Dubbelklik op uw achtergrondlaag en druk op OK om te ontgrendelen. Hernoem het "BG."
Bewaar (Command + S) dit bestand als "mijn_web_tut01.psd" in zijn eigen map met de naam "mijn webtut". Na elke stap in deze tutorial moet je op Command + S drukken en elke paar stappen op Command + Shift + S drukken en een nieuwe kopie "my_web_tut02.psd," "my_web_tut03.psd," enz ... Opslaan lijkt voor veel ontwerpers een goed idee, maar ik heb ondervonden dat veel professionals dit nog steeds niet nalaten.
OK, je hebt het canvas voorbereid, nu moet je de achtergrond en het bovenste gedeelte tekenen. Sleep op de bovenste liniaal om een nieuwe gids te maken; breng het terug naar 120px. Dit is de ondergrens van de header-ruimte. Breng nog twee hulplijnen omlaag naar 130 px en 140 px. Nu is er dezelfde breedte van de ruimte tussen de koptekst en de inhoud als tussen de kolommen. Het begint er uit te zien als een goed raster!
Gebruik het gereedschap Rechthoek (U) om een zwarte rechthoek over het koptekstgebied te tekenen. Dit veronderstelt dat je de standaard zwart hebt ingesteld als je voorgrondkleur, anders kun je eenvoudig op D drukken om hem opnieuw in te stellen. Begin je rechthoek langs het canvas langs de geleider en eindig hem ook naar buiten aan de andere kant. Het voordeel van het uitbreiden van dit element is dat u geen effect ziet toegepast op de perimeter dat u mogelijk wilt toepassen op de onderkant van uw rechthoek, zoals een streek, binnengloed, enzovoort. Geef uw rechthoek de naam "Koptekst BG. "
Het is tijd om je rooster te blokkeren. Dit ontwerp bestaat uit drie inhoudskolommen - de linkerzijbalk zal drie kolommen beslaan, de middelste / hoofdinhoud zal zeven kolommen beslaan en de rechterzijbalk zal twee kolommen omspannen.
Hoewel het geweldig is om de koptekst in richtlijnen op te nemen, wordt de rest van het ontwerp een vloeiender proces, dus u tekent geen horizontale hulplijnen tussen elke sectie. Wanhoop niet! Je kunt nog steeds de perfecte pixelafstand bereiken door op de Shift + pijltoetsen te drukken terwijl je het verplaatsgereedschap (V) hebt geselecteerd. Telkens wanneer u dat doet, wordt de geselecteerde laag 10 px verplaatst.
Je zult afgeronde hoeken maken voor dit ontwerp. Afgeronde hoeken zorgen ervoor dat uw inhoud heel zichtbaar is verdeeld. Kijk terug naar de uiteindelijke afbeelding; merk je hoe op de "Twitter Feed" -module er veel dozen zijn in één doos met afgeronde hoeken? Overweeg nu of de hoeken allemaal scherp waren - de "Twitter Feed" zou niet zoveel als een enkele module voelen.
Je moet er ook rekening mee houden dat kleuren, verlopen en lettertypen helpen om dit een gedefinieerde entiteit te maken, maar de afgeronde hoeken helpen zeker. Houd er ook rekening mee dat alleen al omdat ronde hoeken werken voor dit ontwerp, er duizenden prachtige sites zijn die geen afgeronde hoeken gebruiken. Bekijk Psdtuts + - elke hoek is scherp; echter, andere strategieën zoals contrast en streken worden gebruikt om de lay-out duidelijk te houden. Meer informatie vindt u hier en hier
Genoeg ontwerpbespreking! Selecteer het gereedschap Afgeronde hoeken en stel de hoekradius in op 8 px. Teken een vak in de linker- en rechterkolommen; geef jezelf wat ruimte om later inhoud toe te voegen.
Maak eerst een tekstgebied in het middelste / hoofdinhoudsgebied en vul het in met een pakkende voering zoals in de uiteindelijke afbeelding. Gebruik het lettertype Rockwell of een ander slab-schrift op 40pt met 48pt Leading (regelhoogte). Rockwell kan hier worden gedownload.
Voeg vervolgens wat dummy-tekst toe hieronder en stel Verdana in op 12pt met 20pt Leading. Voeg ook een paar sub-headers toe die Verdana Bold zijn op 17pt met 30pt Leading.
Nu je de details hebt, laten we het hebben over typografie. Een algemene regel die u overal in de webontwerpgemeenschap herhaald zult vinden, is dat een website slechts twee lettertypen mag gebruiken. In deze lay-out heb ik ervoor gekozen om de lettertypen Rockwell en Verdana te gebruiken. Verdana is een veilig weblettertype terwijl Rockwell dat niet is. Daarom moeten alle exemplaren van Rockwell afbeeldingen zijn wanneer dit ontwerp wordt geconverteerd naar XHTML / CSS.
Dit betekent twee dingen voor jou. Ten eerste, om de laadtijd laag te houden, moet u een minimaal gebruik van niet-webveilige lettertypen overwegen. De uiteindelijke afbeelding bevat minder dan tien instanties van Rockwell, de meerderheid zit boven een of ander grafisch element zoals een knop die bij het coderen al een afbeelding is. Ten tweede kunt u effecten zoals slagschaduwen en verlopen toevoegen aan de tekst. Deze twee redenen combineren met de opname van Rockwell, die het best geschikt is voor de traditioneel meer gedecoreerde elementen van een ontwerp zoals koppen, titels en knoppen.
Er is nog een laatste overweging die al dan niet van toepassing is op uw ontwerp en die rekening houdt met eventuele toekomstige Search Engine Optimization (SEO) -werkzaamheden. Alle tekst die op afbeeldingen is gebaseerd - alle instanties van Rockwell voor dit webontwerp - worden niet gecrawld en geanalyseerd door de Google-bots. Dit betekent dat u moet ontwerpen zodat er voldoende webveilige lettertypen zijn waar zoekwoorden kunnen worden opgehaald door Google.
Het volgende punt over typografie, en webontwerp in het algemeen, is consistentie, consistentie, consistentie! Als je Rockwell voor een knop gebruikt, gebruik je het voor alle knoppen! Als u een paar roze koppelingen maakt, maakt u alle koppelingen roze! Door consistent te zijn, kan je ontwerp er scherp en samenhangend uitzien.
Ten slotte een woord over bruikbaarheid en typografie. Je exemplaar heeft ruimte nodig om te ademen, het een fatsoenlijke regelhoogte te geven en je zult een wereld van verschil merken. De site ilovetypography.com suggereert dat uw lijnhoogte ten minste 140% van uw lettergrootte moet zijn. Houd er ook rekening mee dat een tekstgebied dat breder is dan 600px een druk op de ogen is, maar als u verder gaat, is het een goed idee om de lijnhoogte proportioneel te vergroten. Er is altijd meer te leren over typografie - dit is een goed begin.
Zwart en wit is saai, tijd voor wat kleur! De kleuren van dit ontwerp zijn geïnspireerd op het thema Hash One Wordpress
Ik zou je kunnen laten zien hoe je een aangepast staal kunt maken om met de kleuren van je site te laden, maar ik gebruik dit zelf niet. In plaats daarvan kunt u met behulp van de rechthoektool gewoon een raster met grote vierkanten in de marges van uw canvas tekenen en deze vullen met de kleuren die u gaat gebruiken. Ik vind deze methode sneller en toegankelijker.
De geselecteerde kleuren bieden een groot contrast om de website wat dieper te maken. Voel je vrij om elke combinatie te gebruiken die je zou willen, maar overweeg alstublieft contrast, leesbaarheid en harmonieën bij het kiezen van je kleuren. Als je problemen hebt met je kleuren, probeer dan de Kleurenschema-ontwerper.
De kleuren van deze zelfstudie zijn (van links naar rechts, van boven naar beneden):
Voeg al deze rechthoeken toe aan een map en noem deze "SWATCHES." Het gebruik van alle hoofdletters voor mapnamen maakt het visueel eenvoudiger om maplagen te vinden wanneer de lagen verward raken. Het zou ook een goed moment zijn om de mappen "HEADER", "LINKERKANTBALK", "HOOFDCONTACTEN" en "JUISTE SIDEBAR" te starten. Nog een goede oefening om in te stappen, is door je lagen in te kleuren om je workflow te verbeteren. Klik met de rechtermuisknop op het oogpictogram naast elke laag om een kleur te selecteren.
Verlopen kunnen je ontwerp echt verbeteren; Als u echter niet oppast, kunnen verlopen uw ontwerp echt uitschakelen. Hier is mijn suggestie: Maak je gek met je hellingen, maak ze allemaal heel subtiel.
Dubbelklik op de laag "Koptekst BG" en selecteer Overlapping met verloop. Klik op het verloop dat verschijnt om de Verloopbewerker te openen. Verwijder alle stalen behalve de eerste twee: voorgrond naar achtergrond en voorgrond naar transparant. Maak nu een verloop van het donkerste naar het middelste grijze en druk op nieuw om het toe te voegen aan de voorinstellingen. Herhaal dit totdat je acht nieuwe gradiënten hebt - vier donkere tot middelmatige en vier halve tot donkere. Klik op opslaan om deze in een nieuwe map met de naam "Activa" op te slaan. Plaats het dan in de hoofdmap voor dit project. Nu, wanneer je terugkomt naar dit project of je hebt alle hellingen hier.
Gebruik voor de laag "Kopballen BG" de gradatie tussen het midden en het licht van de donkergrijze stalen.
Voor je verloop op de "BG" -laag wil je een iets complexer verloop maken. Er zijn twee gradiënten in de gradiënt "BG". Als het tijd is om te coderen, zullen het afzonderlijke beeldbestanden zijn, maar voor ons hoeven we slechts één complexe gradiënt te maken.
Merk op hoe er een klein deel van het verloop is dat dezelfde kleur zal hebben? Dit is de achtergrondkleur van je HTML-bestand en zorgt ervoor dat de webpagina kan groeien, maar het verloop bovenaan blijft bovenaan en het verloop aan de onderkant om onderaan te blijven.
Photoshop is een geweldig programma, maar als ik erachter kom dat u logo's maakt in Photoshop, zal ik u rapporteren aan Adobe. Logo's moeten worden gemaakt in een vectorprogramma. Voor deze zelfstudie gebruiken we Illustrator.
Open een nieuw bestand in Illustrator en maak uw logo aan (Opmerking: in echte projecten zou u nooit uw webontwerp moeten starten voordat u een logo hebt). Hoewel het logo in dit voorbeeld Rockwell gebruikt, is het niet zo belangrijk om een derde lettertype voor uw logo te hebben. Sla uw logo op in de map "Activa" waar u het verloopbestand plaatst.
Zodra je dit logo hebt, moeten we het terugbrengen naar Photoshop voor wat styling. Til Illustrator en Photoshop eenvoudig naast elkaar en sleep de stukjes van uw logo naar Photoshop. Aangezien elk stuk een unieke stijl heeft, zal het slepen van de stukken individueel en niet als geheel helpen bij het stylen.
Om de afzonderlijke stukken uit te lijnen, brengt u één versie van het hele logo aan, verlaagt u de transparantie en gebruikt u als hulplijn voor het matchen. Verwijder het als je klaar bent. Houd Shift ingedrukt en klik op alle lagen van het logo en druk op Command + G om ze in een nieuwe map te groeperen. Wijzig de naam van deze map "LOGO" en plaats deze in de map "HEADERS".
Elk stuk wordt automatisch omgezet in een slim object. Dit betekent dat ze nog steeds als een vectorobject werken zoals in Illustrator - u kunt het transformatiegereedschap (Command + T) vrij gebruiken zonder de kwaliteit te verliezen.
Nadat je het formaat hebt aangepast en je logo hebt geplaatst, moet je het stylen. Gebruik de verlopen die u eerder hebt gemaakt om het logo enige diepte te geven - meng de kleuren, maar houd de donkere kleur van de hellingen aan de onderkant voor beide woorden.
Voeg vervolgens een slagschaduw toe aan een van de stukjes. Zet de mengmodus op vermenigvuldigen op 100%. Zorg ervoor dat u Globale verlichting gebruiken hebt geselecteerd en stel deze in op 120 graden, met 1 px-afstand, 0% spread en 1 px-formaat. Door Global Light in te schakelen, stelt u alle effecten met schaduwen in dezelfde mate in - onthoud consistentie, consistentie, consistentie!
Ik heb mensen rond gelezen die laten zien hoe je de stijl van een laag kopieert en plakt, terwijl dat een goede methode is voor lagen die erg ver uit elkaar liggen, hier zijn een paar snelle manieren om effecten te verplaatsen en dupliceren. Net zoals wanneer je een laag op het canvas en in het lagenpalet wilt vermenigvuldigen door Alt ingedrukt te houden en een nieuwe kopie van die laag te slepen - je kunt effecten met dezelfde methode dupliceren.
Alt-slepen op de fx symbool in de bronlaag naar de nieuwe laag en je vervangt de nieuwe laag door alle effecten van de eerste laag. Als u de Slagschaduw echter alleen wilt dupliceren in plaats van de fx symbool, sleep dan het individuele effect naar een nieuwe laag en vervang dat ene effect of voeg het toe als de nieuwe laag het niet heeft ingeschakeld. Gebruik deze methode om ervoor te zorgen dat alle lagen van het logo dezelfde slagschaduw hebben.
Selecteer de laag "Header BG". Open de effecten en voeg een 1px zwarte rand toe met de positie ingesteld op Inside. Geef het vervolgens een Outer Glow met de overvloeimodus: Vermenigvuldigen, Dekking op 40%, Kleur zwart en Grootte van 9 px.
Ga terug naar Illustrator en maak een aantal interessante en creatieve vormen die zullen worden gebruikt als de lichte achtergrond voor het koptekstgedeelte. Kleur de vormen wit, sleep ze naar Photoshop, stel hun mengmodus in op Scherm en hun Dekking in variërende hoeveelheden van 2-10%. Kijk nog een keer naar het uiteindelijke beeld, je zult merken dat er veel cirkels en cirkelslagen worden gebruikt, deze zijn allemaal gemaakt in Photoshop. Voor de meer complexe vormen is Illustrator sneller, maar voor cirkels bespaart u tijd door ze gewoon in Photoshop te maken.
Nu maken we een cirkel met alleen de witte lijn in Photoshop. Maak een zwarte cirkel met de Ellipse Tool, open vervolgens de effecten voor die laag en geef het een witte lijn. Sluit de effecten en stel vervolgens de mengmodus in op scherm, je ziet alles behalve de witte lijn verdwijnen. Het grootste voordeel hiervan is de mogelijkheid om de breedte van de lijn te wijzigen door eenvoudig de effecten te openen en te bewerken.
Besteed wat tijd aan rommelen hiermee, experimenteer met verschillende opaciteiten en composities - creëer enkele funky vormen die je kunnen helpen dit ontwerp te individualiseren. Maakt u zich geen zorgen als sommige van uw vormen onder de kop zichtbaar zijn, wij zorgen ervoor dat dit in de volgende stap gebeurt.
Selecteer alle vormen en plaats ze in een map boven de laag "Koptekst BG". Command-klik op het vectormasker (het grijze vak) van "Header BG" om de volledige koptekst geselecteerd op het canvas te zien. Selecteer nu de map die u zojuist hebt gemaakt en klik op het kleine knopje onderaan het lagenvenster met de naam "Laagmasker toevoegen"
Masking is iets waar ik echt niet genoeg van zie in mijn professionele praktijk, het is erg handig en snel, en het beste deel is dat het een niet-destructieve methode is. Bedenk dat je de vormen net in één laag had kunnen afvlakken en het gebied eruit hebt laten springen. Maar toen wilde je een deel van de compositie of de streek van een van de cirkels veranderen - maskeren maakt teruggaan en veranderingen sneller aanbrengen.
Onder de koptekst ziet u enkele afbeeldingen die lijken op omgekeerde glooiende heuvels. Met behulp van je staalkleuren en het spelen met de transparantie kun je deze look bereiken. Uiteindelijk zullen deze moeten worden geknepen om horizontaal te betegelen.
Laten we even stilstaan bij deze en de rest van de niet-functionele elementen van het ontwerp. Er zijn een behoorlijke hoeveelheid, nou ja, maar enigszins willekeurige afbeeldingen. Welke bijdrage voegen deze toe aan het ontwerp? Ten eerste zijn dit soort afbeeldingen een goede manier om het gevoel en de sfeer van een website te sturen, een geweldige manier om een merk te promoten.
Hoewel ik niet zo lang over de expertise beschik om branding uit te leggen, zal ik proberen om u een kort overzicht te geven, zodat u dit allemaal in perspectief kunt plaatsen. Een merk is alles over een bedrijf dat een consument zich voelt - de emoties, herinneringen, geluiden, kleuren, ervaringen, enz. Marty Neumeier legt in zijn boek The Brand Gap heel duidelijk uit dat "een merk niet is wat je zegt dat het is. wat ZIJ zeggen dat het is. " Wat heeft dit allemaal te maken met de graphics? Hoewel u geen merk kunt bouwen, kunt u het helpen groeien in de geest van een klant door voortdurend visuals te leveren die de essentie van uw bedrijf oproept..
OK, dus kijk eens naar de uiteindelijke afbeelding, wat zegt dit over dit bedrijf? Mijn focus was om de kleuren en vormen een gevoel van plezier en funkiness te laten vertalen, maar de structuur en strikte gridlay-out geven een gevoel van professionaliteit en ernst. Is dit het exacte merk dat elk bedrijf wil bouwen? Zeker niet, elk bedrijf zou uniek moeten zijn en elke website moet een gedifferentieerde uitstraling hebben.
Verberg alles behalve de laag "BG". De achtergrond van dit ontwerp wordt omlijst door een grote afgeronde rechthoek. Dit voegt iets meer structuur en diepte toe aan uw ontwerp. Aangezien je de hoofdinhoud geen eigen vak zoals de zijbalken zult geven, is dit een goede manier om de achtergrondafbeeldingen weg te wassen en de leesbaarheid te verbeteren. De witte afgeronde rechthoek heeft een straal van 8 px, hetzelfde als de vakken - nog een detail van de consistentie. Je vindt meer effectdetails in de onderstaande afbeelding.
Gebruik dezelfde methode als bij de koptekst en voer enkele vormen in vanuit Illustrator en verplaats ze om kleine afbeeldingen te maken. Terwijl je doorgaat met ontwerpen, zul je waarschijnlijk merken dat je met hen aan het rondfladderen bent om een compositie te vinden die goed werkt. Meng je tinten van donkere kleuren en transparantie.
U merkt misschien dat het pictogram van het logo veel wordt gebruikt, een soort van subliminale herinnering. Ik had een filmprofessor op de universiteit die me leerde dat een afbeelding, kleur, enz. Minstens drie keer in een film moest worden herhaald zodat de gebruiker het kon onthouden en er betekenis aan kon ontlenen. Ik probeer dat principe te gebruiken met mijn ontwerp - het logo is vele malen herhaald (smaakvol en redelijk) met de hoop dat de gebruiker bekend raakt met het bedrijf en het pictogram onthoudt.
De navigatie van dit ontwerp is sterk beïnvloed door mijn huidige favoriete website - Aviary.com.
Het kleine huis grafisch en het woord Huis zijn een beetje helderder en er zit een lichtere grijze achtergrond achter - dit is om de bruikbaarheid te verbeteren. Denk als de gebruiker! Laat hen gemakkelijk weten op welke pagina ze zich bevinden. Gangbare manieren om dit te doen is via tabs, kleur, onderstrepingen, hoogtepunten en extra afbeeldingen. Denk na over deze opties en wees creatief met je aanpak.
Voor koppelingen en knoppen is een zweeftoestand een enorme verbetering voor uw bruikbaarheid. Kijk nog een keer terug naar de uiteindelijke afbeelding en bekijk enkele links. Een goed doordacht ontwerp zal erover nadenken hoe deze eruit zullen zien en hoe ze zullen functioneren. Als u uw eigen sites niet codeert, gebruik dan een kleine afbeelding van een linkcursor om aan programmeurs aan te geven wat er aan de hand is. Verborgen functies zoals een vervolgkeuzemenu (zie hieronder) moeten worden overwogen en volledig zijn ontworpen. Wachten op het vinden van je prachtige ontwerp wordt gecombineerd met een afschuwelijk vervolgkeuzemenu zal je gek maken. Als u de ontwerper bent, is het aan u om dit allemaal te overwegen.
De afbeelding van de linkcursor kan worden gevonden als een PNG, samen met wat meer gratis ontwerpresources hier.
Heb je dat opgemerkt NIEUWE! badge? Ik heb net een van mijn eerste regels overtreden! Wel, we maken een kleine uitzondering voor pixellettertypen! Pixellettertypen hebben geen anti-aliasing, dus het maakt ze erg helder. Deze knapperigheid kan vaak onooglijk zijn voor een normaal lettertype, maar pixellettertypen functioneren wonderwel bij kleine formaten. Kijk eens hoe onleesbaar Verdana en Georgia op 8pt staan tegenover de pixellettertypen, een groot verschil, ja?
Pixel-lettertypen zijn populair in Flash, ze laden sneller en behouden die knapperigheid, maar ze werken ook goed in webdesign! OK, dus nu je meer weet over de geneugten van pixeldocumenten, moet je ze spaarzaam gebruiken. Voor toepassingen als deze klein NIEUWE! het werkt geweldig, maar voor het grootste deel zou je het niet voor veel andere toepassingen moeten gebruiken - niemand wil meer dan een paar woorden in een pixeldocument lezen. Het lettertype dat in dit voorbeeld wordt gebruikt, wordt Uni 5063 genoemd en kan gratis worden gedownload van Miniml.
Bekijk nu de afgeronde hoeken van het vervolgkeuzemenu. De witte achtergrond is eigenlijk opgebouwd uit drie afgeronde hoekrechthoeken. De derde is binnenstebuiten gekeerd met de Direct Selection Tool om een afgeronde binnenhoek te maken.
Zet uw zijbalken wit en maak hulplijnen die elk van uw zijbalken een opvulling van tien pixels geven. Voeg alle dummy-tekst die u wilt gebruiken toe en dupliceer de zijbalken indien nodig. Als u ze verticaal wilt verlengen of inkrimpen, gebruikt u het gereedschap Direct selecteren om de onderste vier ankerpunten te selecteren en deze naar boven of beneden met het toetsenbord aan te duwen. De volgende stap is het fine-tunen van de stijl van alle tekst.
Alle tekst is gerangschikt in een hiërarchie van belangrijkheid en focus, en dit wordt gesignaleerd door de vormgeving van die tekst. De grootste lettergrootte en donkerste kleur (lees: hoogste contrast) is gereserveerd voor de kop van de hoofdinhoud. De subkop is groter en donkerder dan het hoofdgedeelte en het hoofdgedeelte is groter dan de inhoud van de zijbalk, enzovoort. Houd er rekening mee dat alle kleuren uit de stalen zijn - consistentie, consistentie, consistentie!
Nu je alle zijvakjes hebt geordend en de tekst op de juiste manier gekleurd is, kun je de vakken gaan stylen. Geef elk binnenkomst een heel licht achtergrondverloop en gebruik het lijngereedschap om een horizontale lijn bovenaan het verloop te tekenen. Deze zullen elkaar visueel scheiden binnenkomst. Geef de zijbalk een lichte slagschaduw.
Voor de achtergrond van het titelgebied van zijbalksecties, tekent u een rechthoek onder de andere opmaak / vormen en voegt u een verloopoverlay toe van roze en een 1px-streek gevuld met een horizontaal gereflecteerde verloop van roze naar wit. Geef de titelachtergrondlaag vervolgens een laagmasker in de vorm van het zijvak.
Herhaal deze stappen voor alle zijbalkdozen die uw ontwerp heeft. Als u geïnteresseerd bent in het maken van het nieuwsbriefinschrijvingsvak, laat er dan ruimte voor en wij zullen het in de volgende paar stappen behandelen.
Om die kleine afbeelding onder in elk zijvak te maken, gaat het veel sneller als je iets meer met Illustrator werkt. Illustrator is vaak ingesteld op CMYK in de kleurenmodus; aangezien u echter voor het scherm ontwerpt, moet de kleurmodus worden gewijzigd in RGB. Schakel over naar Illustrator en ga naar Bestand> Documentkleurmodus> RGB-kleur. Vervolgens moet je de gewenste footer-afbeelding tekenen.
Schakel nu terug naar Photoshop, selecteer de drie middelste stalen donkergrijs, roze en cyaan - sleep ze naar Illustrator. Gebruik het gereedschap Pipet (I) in Illustrator om de afbeelding naar wens in te kleuren. Sleep de afbeelding naar Photoshop, formaat en plaats dienovereenkomstig. Je kunt ook wat effecten toevoegen, ik ging met een lichte slagschaduw en een subtiele Gradient Overlay (zwart naar wit, met een mengmodus van vermenigvuldigen en een dekking van 10%)
Het voordeel van deze procedure is dat er een slim object is dat al gekleurd is. Als je dit naar Photoshop zou slepen en de afzonderlijke stukjes zou willen kleuren, zou het een langer proces zijn dat vereist dat je het slimme object rastert en meer dan één laag maakt.
Ik zal niet te gek worden in de ideeën achter de graphics en branding zoals voorheen, maar ik wil enkele van de voorgrondafbeeldingen in de site aanraken. In de uiteindelijke afbeelding zijn er een aantal afbeeldingen vergelijkbaar met die in stap 18, maar ze zijn iets complexer. Zodra u de vormen van uw afbeelding hebt getekend, opent u de effecten en voegt u een verloopoverlay toe.
U kunt zien hoe de kleuren in het verloop zijn gerangschikt om het uiterlijk van een scherpe scheiding tussen de lichtere tinten en donkerdere tinten te geven. Houd er rekening mee dat er een aantal manieren zijn om dit te bereiken, inclusief het gebruik van witte rechthoeken en laagmaskers.
Deze grafische afbeeldingen zijn geweldig voor het insluiten en personaliseren van pictogrammen. Net als het vraagteken in de hoofdtekstsectie Wist je dat… elk pictogram of symbool kan daar worden geplaatst. De onderstaande voorbeelden gebruiken pictogrammen uit het gratis pakket Simplicio en nog veel meer gratis pictogrampakketten zijn te vinden op Icon Pot.
Verrassend genoeg is voor mij een van de moeilijkste onderdelen van webontwerp het maken van aangepaste knoppen. Deze knoppen volgen wat door de webontwerpcommunity "Web 2.0 Design" is genoemd.
Laten we eerst enkele knoppen van de uiteindelijke afbeelding bekijken. Voor consistentie is de tekst op elke knop Rockwell vet behalve de login-knop vanwege zijn kleine formaat - Rockwell werkt niet goed bij dergelijke kleine formaten. Bovendien zijn alle stijlen van de tekst en de achtergrondknoppen hetzelfde.
Als je vervolgens naar de ingezoomde knop kijkt, kun je enkele effecten van dichterbij bekijken. Veel van de gebruikte effecten komen heel vaak voor bij het maken van die Web 2.0-stijl, met name een slag van 1 px rond de knop, schaduwen laten vallen op zowel de tekst als de doos, pictogrammen, iets om de indruk van 3D en hellingen te geven. Je kunt zien dat de knop Volgen ons al deze gebruikt. Om het 3D-effect te creëren, werd een schaduw voor de binnenste slag toegepast op de achtergrond. Kijk goed en je zult zien dat de tekst een zeer scherpe slagschaduw heeft - dit creëert dezelfde indruk alsof je de tekst zou dupliceren. Kleur de onderste kopie zwart en verplaats deze naar beneden en naar rechts één pixel.
Voel niet dat er een goede of verkeerde manier is om knoppen te maken. Kijk eens wat er op internet is, speel wat met de effecten en kom tot rust op iets dat volgens u allebei op een knop lijkt en een aantrekkelijke match is voor het webontwerp waaraan u werkt.
Hoe belangrijk het ook is om uw webontwerp op het net te laten volgen, af en toe kan het raster hier breken en kan het uw ontwerp een ander karakter geven. De primaire plaats waar het raster wordt gebroken in dit webontwerp bevindt zich in het kopgebied bij het logo. Deze grafische mashup verlicht de spanning van de gridstructuur en geeft de site een funkier en gedifferentieerder gevoel. Opgemerkt moet worden dat het ontwerp en de inhoud het raster visueel breken in dit gebied. De beschrijving van het bedrijf houdt zich aan de kolom, maar breekt in de rij en de afbeeldingen zijn bijna willekeurig in hun plaatsing. De grafische mashup bestaat uit vormen, verlopen en slagschaduwen; je zou nu al erg vertrouwd met deze moeten zijn :)
Een andere plaats waar het raster is verbroken, is de aanmeldingsdatum voor de nieuwsbrief met een trendy lintomslag. De omslag doet niet veel om het raster visueel te verbreken, maar het geeft de inhoud een beetje extra ruimte om de marges van de inhoud naar buiten te brengen. Het gewenste effect van het lint was dat het een beetje focus zou krijgen en de pagina een beetje meer stijl zou geven. Het breken
Accentsconagua