Tutorial: Hoe een chatroom IPhone UI te ontwerpen
In deze tutorial gaan we een iPhone-gebruikersinterface ontwerpen voor een op een forum en chat gebaseerde mobiele applicatie.
De app bevat een handvol alledaagse aanrakingsinterface-elementen, zoals knoppen, invoervelden en aanraakbewegingen.
We zullen verschillende Photoshop-tools, laagstijlen behandelen en uiteraard alle ontwerpbeperkingen aanpakken; Het ontwerp is ook pixel-perfect en mooi genoeg om een plaats op een iPhone-scherm waardig te zijn.
Het ontwerp is samengesteld met behulp van Photoshop CS5.5, maar alle recente versies van Photoshop zullen fantastisch werken.
Schermvereisten voor apps
We gaan in deze zelfstudie één scherm maken. Het scherm wordt het belangrijkste chatscherm voor een op chat gebaseerde toepassing, ongeveer zoals een openbare chatruimte maar op uw telefoon. De vereisten van dit scherm zijn:
- Een koptekst - dit is de chatruimte waar je momenteel bent.
- Een knop Back / close / topics - om terug te gaan naar het vorige scherm.
- Een knop voor mensen: deze laat zien wie zich momenteel in de chatroom bevindt.
- Een lijst met berichten - berichten moeten avatar & timestamp bevatten.
- Een manier om gebruikersprofielen en rapportageberichten te bekijken.
- Een tekstveld om uw berichten te schrijven.
- Een verzendknop om uw berichten te plaatsen.
Planning, schetsen en wireframing
Zoals met elk project van een gebruikersinterface, is plannen, schetsen en wireframing van uw interface essentieel. Het sluit nogal vaak idiote ideeën uit (hoewel ze misschien niet dom lijken in je hoofd!) Voordat je digitale concepten en mockups samenvoegt. Wat een schitterende oplossing lijkt om een probleem in je hoofd op te lossen, zou uiteindelijk helemaal niet kunnen werken in de praktijk. Daarom is wireframing voor het starten van een project zo'n belangrijke stap.
Pak een pen en je favoriete pad en begin met schetsen.
Zoals je kunt zien aan de bovenstaande afbeelding, heb ik slechts een paar minuten besteed aan het samenstellen van drie verschillende concepten; meestal duurt dit proces dagen of soms weken, maar omdat we maar één scherm ontwerpen en het doel van de app eenvoudig is, zou het schetsen hiervan niet lang moeten duren! Ze zijn meestal erg vergelijkbaar, maar elk heeft zijn unieke verschillen, die ik hieronder zal samenvatten.
Schets A
Geïnspireerd door de originele Twitter UI voor iPhone, kunnen gebruikers in deze gebruikersinterface een bericht vegen om meer opties te bekijken, zoals 'Profiel bekijken' en 'Gebruiker rapporteren' - een leuke en ruimtebesparende manier om meer inhoud op dit scherm toe te staan. Ik speelde met het idee om een instellingenknop in de navigatiebalk op dit scherm te hebben, maar besloot om mijn normale regel van "Minder is meer" te volgen - het is onwaarschijnlijk dat de gebruiker elke keer dat ze de app gebruiken toegang tot de instellingen hebben zodat het niet nodig is hier.
Schets B
Dit concept is een beetje compacter, met de knoppen "View Profile" en "Report User" als statische pictogrammen rechts van de berichten. Ik speelde met het idee om hier geen knop "Verzenden" te hebben en gebruik in plaats daarvan de verzendknop op het iOS-toetsenbord. Ik besloot hiertegen omdat de meeste apps (inclusief iOS-standaardapps zoals berichten) de toetsenbordzendknop en de extra verzendknop naast het tekstinvoerveld hebben. Ik hou ervan mijn interfaces consistent te houden met anderen in de App Store.
Schets C
Schets C is de schets die ik besloten heb om door te gaan - in plaats van een terugknop hebben we een knop Sluiten. Ik denk dat dit het meer voor de hand liggend maakt dat als je eenmaal op sluiten klikt, je geen deel meer uitmaakt van dat gesprek (in tegenstelling tot berichten-apps, waar je teruggaat, en terug kunt keren om nog steeds al die eerdere berichten te zien). De knop Personen toont een lijst met gebruikers die zich momenteel in de chatroom bevinden, en ik heb opnieuw het idee aangenomen om de dia te gebruiken om meer elementen te bekijken (zoals de Twitter-app) om de gebruiker toe te staan het gebruikersprofiel te bekijken of te rapporteren.
Als dit klaar is, is het tijd om iets samen te voegen in Photoshop!
Stap 1: Status en navigatiebalk
Voordat we deze stap zetten, moeten we ons document maken. De standaard grootte van een iPhone-scherm (op Retina-resolutie) is 640 px breed en 960 pixels hoog met een resolutie van 326ppi. Ik heb de neiging om altijd met een witte achtergrond in mijn ontwerpen te beginnen.
De eerste stap is om de standaard iOS-statusbalk in te voeren. De statusbalk is de balk aan de bovenkant van je iPhone die je belangrijke informatie vertelt, zoals je signaal, provider, tijd en batterijlevensduur. Er zijn drie opties: een zwarte balk, een zwarte balk met lage transparantie of de zilveren balk.
Als u wilt dat uw app-ontwerp eruitziet als de echte deal, kunt u de statusbalk van de Retina iPhone GUI PSD-kit pakken hier gevonden . Download en open gewoon de PSD en sleep de gewenste balk naar uw PSD-document. Plaats het boven aan je canvas.
De navigatiebalk is de volgende op onze takenlijst. De standaard navigatiebalk is 86px hoog en beslaat de gehele breedte van uw iPhone (640px). Nogmaals, je kunt dit element verslepen vanuit de bovengenoemde PSD-kit, of je kunt dit handmatig creëren (mijn voorkeursoptie omdat er geen bijgevoegde stijlen zijn). Selecteer het gereedschap Rechthoekvorm en plaats een rechthoek van 640 x 86 px op uw canvas.
Stap 2: Navigatiebalkknoppen
Terug verwijzend naar onze wireframes, hebben we twee knoppen op onze navigatiebalk. Selecteer het gereedschap Afgeronde rechthoekige vorm (vergeet niet om altijd vormgereedschappen te gebruiken voor vormen in UI-ontwerp, het maakt het veel eenvoudiger om ons document te schalen voor lagere resoluties!). Ik heb afmetingen 100 x 50 px gebruikt met een hoekradius van 6 px.
Plaats deze vorm aan zowel uw linker- als rechterkant van uw navigatiebalk en plaats ze mooi.
Stap 3: Stijlkeuze
Het is tijd om te beginnen met het kiezen van onze ontwerpstijl. Met deze app kunnen mensen chatten en nieuwe mensen ontmoeten, en mensen plezier laten hebben. Om die reden voel ik een leuke, eigenzinnige kleurstelling en typografie hier is belangrijk om dat punt duidelijk te maken.
Selecteer het gereedschap Tekst en kies een lettertype dat overeenkomt met de afbeelding die je in je hoofd hebt. Ik koos voor de bubbels Arial Rounded MT Bold . Typ uw onderwerpnaam (ik kies "UI-ontwerp") en lijn deze uit op uw navigatiebalk.
We gaan verder met het leuke thema dat we hebben geselecteerd voor de app, het is tijd om een aantal kleuren te kiezen. Ik persoonlijk gebruik Color Lovers om mijn kleurenkeuzes te inspireren tijdens het ontwerpen. In dit specifieke geval zocht ik naar "plezier" en binnen enkele seconden kreeg ik een heleboel verschillende opties en inspirerende paletten te zien als basis voor mijn ontwerp.
Uiteindelijk heb ik er één gekozen Speelkamer . Het is belangrijk om na te denken over welke kleuren u nodig heeft bij het selecteren van een palet; Ik vind het kiezen van iets lichts, iets donkers en iets helders is altijd een goed uitgangspunt. Het is belangrijk om een goed contrast te hebben in uw ontwerp.
Stap 4: Navigatiebalk-styling
We gaan nu terug naar onze navigatiebalk en geven deze de kleur die hij verdient. Selecteer de laag van de navigatiebalk (ik hoop dat je je lagen geordend hebt gehouden!), Klik met de rechtermuisknop en selecteer Mengopties. Hier vindt u de krachtigste Photoshop-tools voor het maken van pixel-perfecte interfaceontwerpen. Vanaf hier kunt u schaduwen, verlopen, patronen en stokes toevoegen, met de mogelijkheid om deze stijlen naar andere lagen te kopiëren en te plakken.
Allereerst gaan we een verloop toevoegen aan onze balk, dus klik op Verloop Overlay. Ik heb de turquoise kleur geselecteerd als degene die ik wil gebruiken voor mijn navigatiebalk. Hij is helder en heeft een krachtige stoot en maakt ons ontwerp gemakkelijk te onthouden. Pas een hoekovergang van 90 graden toe gaande van licht (boven) naar donker (onder).
Klik nu op het deelvenster Lijn. Verander de grootte van uw lijn in 2 in plaats van de standaard 3. Een tip is om altijd te proberen oneven nummers in UI-ontwerp te vermijden, vooral op mobiele apparaten. Dit zorgt alleen maar voor meer werk voor zowel de ontwerper als de ontwikkelaar als het gaat om het schalen van het werk (je kunt geen halve 3 pixels zoals een halve pixel niet bestaat!).
Verander het vultype van je lijn in verloop, en zorg ervoor dat de streek verschijnt aan de buitenkant van je vorm. Selecteer een donkerblauwe kleur voor de onderkant van je streek en zwart voor de bovenkant. Omdat de streek zich aan de buitenzijde van onze navigatiebalk bevindt, wordt het zwarte deel van de streek niet boven aan de statusbalk weergegeven en daarom kan de gebruiker de streep helemaal onderaan zien.
Selecteer het deelvenster Binnenste schaduw en pas een witte schaduw van 15% dekking toe op uw balk. Dit verschijnt bovenaan je balk en geeft het een mooie highlight, waardoor het meer 3D lijkt. Ik gaf mijn schaduw een afstand van 2 px en een grootte van 3 px.
Nu is het tijd om onze navigatiebalk echt te laten knallen. Door patronen te gebruiken, kunnen we veel diepte toevoegen aan ons ontwerp. Ik gebruik een wit rasterpatroon op mijn navigatiebalk. Als je dit patroon wilt gebruiken, kun je een verzameling hiervan gratis downloaden op Premium Pixels .
Stap 5: Schaduwing van typografie
Om onze typografie enige diepte te geven, open je het deelvenster met mengopties en pas je een slagschaduw toe. Verander de hoek in -90 (zorg ervoor dat Globale stijl gebruiken hier niet is aangevinkt, anders veranderen alle schaduwen in je ontwerp naar -90) en gebruik dezelfde kleur die je hebt gebruikt voor de onderkant van je navigatiebalken. Geef de schaduw een afstand van 2 px en laat de grootte naar 0px vallen. Dit zorgt ervoor dat een heldere slagschaduw boven je tekst direct interessanter wordt.
Stap 6: stylen van de knoppenbalk van de navigatiebalk
We gaan nu een aantal geweldige stijlen toepassen op onze navigatiebalken. We willen dat deze knoppen goed aansluiten op onze navigatiebalk, maar tegelijkertijd moeten ze goed genoeg opvallen zodat de gebruiker onmiddellijk kan zien dat het knoppen zijn. Om dit te doen, gaan we meer laagstijlen gebruiken om ze een 3D, oogverblindend effect te geven.
Open het deelvenster met mengopties en klik op verloopoverlay. Geef je knop een licht (boven) tot donker (onder) verloop met behulp van kleuren uit je navigatiebalk. De lichte kleur werd geselecteerd uit de markering van mijn navigatiebalk en de donkere kleur werd geselecteerd uit de onderste streek van mijn navigatiebalk.
Selecteer het lijnpaneel en verander de grootte van uw lijn in 2px, met een buitenpositie. Verander het vultype in gradiënt en de hoek in 90 graden. Wijzig de verloopkleuren van licht (boven) naar donker (onder), op basis van de kleuren op de kleuren die al voor uw navigatiebalk en knoppen zijn gebruikt. Meteen kun je zien dat deze knop je knop een 3D-uitstraling geeft, alsof deze uit de navigatiebalk komt in plaats van er bovenop te zitten.
Om de knop wat meer op te fleuren en nog visueler te maken, voegen we een innerlijke gloed toe aan de knop. Klik op het binnenste gloedpaneel en verander de mengmodus naar het scherm. Zet de dekking op 20% en zorg ervoor dat de ruis op 0% staat. Verander de standaard gele gloed in wit en zorg ervoor dat het formaat nog steeds is ingesteld op de standaard 5px. Dit zou je knop een mooie innerlijke gloed moeten geven, waardoor de knop er echt tastbaar uitziet!
We gaan nu een innerlijke schaduw toevoegen om onze knop iets realistischer te maken. Zet de dekking op 15% en selecteer zwart als jouw kleur. Sleep de afstand naar 2px en de grootte naar 4px. Verander nu de hoek naar -90 graden (zorg ervoor dat Globale verlichting gebruiken niet is geselecteerd). Dit geeft de onderkant van je knop een lichte schaduw, waardoor een deel van de onderste innerlijke gloed wordt verborgen die we zojuist hebben toegepast. In het echte leven zou dit gebied overschaduwd zijn, dus het was belangrijk om de innerlijke gloed hier te verbergen.
Om de styling van onze knop af te maken, voegen we een slagschaduw toe. Selecteer het slagschaduwpaneel en verander de kleur in wit met een dekking van 25%. Deze schaduw gaat fungeren als een hoogtepunt onder onze streek, dus verander de afstand naar 4 px (2 px om het streekgebied te beslaan, en 2 px die onder de streep te zien zal zijn).
Stap 7: Knoop labels
Een knop zonder label is zinloos, dus nu gaan we een beetje tijd besteden aan het afmaken van onze knoppen. Klik eerst met de rechtermuisknop op de gestileerde knop en selecteer de optie Laagstijl kopiëren. Klik nu met uw rechtermuisknop op uw niet-gestileerde knop en selecteer de optie Laagstijl plakken.
We gaan eerst verder werken aan onze rechterknop. Deze knop heeft het label "Mensen" en we willen een pictogram van 2+ mensen gebruiken. In het belang van deze tutorial ga ik iconen gebruiken gemaakt door creatieve studio Yummygum; je kunt het pakket vinden dat ik heb gebruikt IconSweets.com - Ik gebruik de pictogrammen van dit pakket tijdens de zelfstudie.
Gebruik hetzelfde lettertype dat u hebt gebruikt voor de titel van de navigatiebalk en typ de labels van uw knoppen. Formaat wijzigen en op uw knop plaatsen en vervolgens uw voorkeurspictogram (of uw eigen pictogram) in uw document plaatsen. Plaats deze twee lagen gelijk over je knop. Ik heb mijn lagen uit elkaar geplaatst, dus er zijn 15 px aan elke kant en de knop en 10 px tussen het pictogram en de tekst. Plak de laagstijl van uw navigatiebalkonderwerptekst op zowel uw pictogram- als knoplabel. Als u de lengte van uw knop moet wijzigen, gebruikt u het gereedschap Direct selecteren om de 4 ankerpunten aan de rechterkant te selecteren en sleept u vervolgens. U kunt de Shift-toets ingedrukt houden om deze wijziging recht te houden.
Herhaal dit proces met de knop aan de linkerkant van uw navigatiebalk, deze keer met een kruispictogram en het woord "Sluiten". Om een beetje meer styling toe te voegen aan mijn knoppen verlaagde ik de dekking van de twee achtergrondvormen tot 95%, hierdoor kan een klein beetje van het rasterpatroon eronder doorschijnen.
Stap 8: Tekstveldbalk
Het is nu tijd om wat aandacht te besteden aan de rest van ons scherm. Grijp het gereedschap Rechthoekvorm en gebruik dezelfde afmetingen van onze navigatiebalk (640 x 86 px) plaats een vorm op uw canvas. Plaats deze onder aan het scherm.
Stap 9: De achtergrond
We gaan nu werken op de achtergrond van ons ontwerp. Open het deelvenster met mengopties voor je achtergrondlaag en kies een patroon om het te vullen. Ik heb een donker patroon gebruikt met verticale lijnen er vanaf Subtiele patronen - u kunt hier de volledige patroonreeks downloaden die ik ten zeerste aanbeveel.
Als u enkele van uw eigen kleuren wilt toevoegen aan het patroon dat u hebt gekozen, kunt u dit doen met behulp van de kleuroverlay-stijl. Ik heb een bruine (van mijn kleurenpalet dat ik eerder had gekozen) op 35% aangebracht. Deze dekking is laag genoeg om je textuur / patroon te laten zien en toch hoog genoeg om de kleur of achtergrond te tonen.
Nu we een donkere achtergrond hebben, ziet u het punt waarop onze navigatiebalk en onze achtergrondafbeelding er niet zo goed uitzien. U kunt dit probleem eenvoudig oplossen door een schaduwstijl toe te passen op uw navigatiebalk, waardoor het lijkt alsof het boven uw achtergrond is.
Open het deelvenster met mengopties opnieuw voor uw navigatiebalk en selecteer het slagschaduwpaneel. Zorg dat zwart is geselecteerd en verander de dekking naar 25%. Vergroot zowel de afstand tot 6 px als de grootte tot 10 px en klik op OK. Mogelijk moet u met deze opties experimenteren, omdat de resultaten kunnen variëren, afhankelijk van de kleur en het type textuur / patroon dat u voor uw achtergrond hebt geselecteerd.
Stap 10: berichten
Nu we de achtergrond- en navigatiebalk hebben voltooid, gaan we ons concentreren op het verkrijgen van de belangrijkste inhoud van de app. Selecteer het gereedschap Rechthoekvorm en plaats een rechthoek op je canvas. De breedte die ik gebruikte was 600 px, waardoor 20 pixels zichtbaar waren aan elke kant van de vorm. Ik heb een veel lichtere versie van de gele / crème kleur uit het eerder gekozen kleurenpalet gebruikt.
Selecteer het gereedschap Afgeronde rechthoekige vorm en wijzig de afmetingen in 80 x 80 px en de straal in 6 px. Plaats de vorm (die moet worden gebruikt als onze avatar-vorm) op uw canvas en plaats deze op de juiste manier. Om mijn ontwerp consistent te houden, heb ik 20 px toegestaan om tussen de randen van mijn berichtachtergrond en mijn avatarvorm te zitten.
Gebruik de teksttool en schrijf uw naam en een bericht; Ik gebruikte Arial Rounded MT Bold voor mijn naam en normale Arial voor mijn bericht. Maak een tekstformaat van je tekst, zodat deze goed in de achtergrond van je bericht past.
We gaan nu wat stijl toevoegen aan ons bericht met alleen kleur; Ik veranderde de kleur van mijn naam in een donker turquoise (heel dicht bij zwart) en een verwassen turquoise geïnspireerd door mijn navigatiebalk.
Vervolgens heb ik een foto van mezelf ingevoegd door naar Bestand> Plaats te gaan. Na het invoegen heb ik het formaat van de afbeelding aangepast en deze boven mijn zwarte avatarvak geplaatst dat we eerder hebben gemaakt. Als u het knippen van de afbeelding wilt voorkomen en u ook de optie wilt geven om uw avatar op een later tijdstip te verplaatsen of van formaat te wijzigen, klikt u er met de rechtermuisknop op en selecteert u de optie Knipmasker maken. Hiermee wordt uw avatarafbeelding gekoppeld aan de zwarte doos van uw avatar en wordt alleen weergegeven wat er boven de zwarte doos staat. U vindt met behulp van het verplaatsgereedschap dat u deze afbeelding nog steeds kunt verplaatsen en de grootte ervan kunt wijzigen.
Met behulp van een ander pictogram van IconSweets heb ik een leuk klein tijdstempel gemaakt. Ik moest mijn pictogramgrootte verkleinen-je kunt dit doen door naar Bewerken> Transformeren> Vrije transformatie te gaan en de dimensies te wijzigen (in pixels of percentage). Ik gebruikte 70% in zowel de breedte als de hoogte om de verhoudingen te behouden. Ik heb wat tekst toegevoegd en voila. Zorg ervoor dat u een kleur selecteert die gemakkelijk te lezen is, maar niet de aandacht trekt.
Stap 11: dubbele berichten
Dupliceer de berichtenvakken onder elkaar, met een opening van 2 px tussen elke achtergrond. U kunt dit doen door te klikken en uw lagen te slepen over het pictogram Nieuwe laag, of u kunt ook op Cmd + Shift + Pijl omlaag tegelijk drukken om de lagen te dupliceren en te verschuiven.
Wijzig alle inhoud in uw berichtvakken, alsof het een echt gesprek was. Als u de grootte van uw achtergrondvakjes wilt wijzigen, gebruikt u het gereedschap Direct selecteren en wijzigt u het formaat met behulp van de ankerpunten. Dit houdt alle randen mooi en scherp.
Stap 12: Berichtstyling
Als dat klaar is, kunnen we ons nu concentreren op het tot leven brengen van onze berichtenboxen. Open het deelvenster Overvloeimogelijkheden en selecteer het deelvenster Slagschaduw. Wijzig de overvloeimodus in normaal en selecteer wit als uw kleur. Verhoog de dekking tot 80% in plaats van de standaard 75% en geef de schaduw een afstand van 2 px. Hiermee wordt de 2px-afstand verborgen die we achterlieten tussen elk van de berichtvakachtergrond.
Kopieer en plak de stijl van de bovenstaande laag op alle lagen van de berichtenvakachtergrond. Je zou moeten eindigen met iets als hierboven.
Stap 13: Ronde hoeken toevoegen
Om ons ontwerp interessanter te maken en ook om meer diepgang toe te voegen, voegen we afgeronde hoeken toe aan de onderkant van onze berichten en laten we het lijken alsof het papier op meer papier is gestapeld.
Selecteer het gereedschap Afgeronde rechthoek en geef het een straal van 10 px. Wijzig de breedte in 600 px (of de breedte die je hebt gebruikt voor de achtergrond van je berichtendoos) en een hoogte die niet hoger is dan de hoogte van je onderste berichtvakachtergrond. Ik heb hier een heldere kleur gebruikt zodat deze goed zichtbaar is.
Gebruik het gereedschap Direct selecteren om de inhoud van uw vectorvormlaag te selecteren (het afgeronde vak dat we net getekend hebben) en ga naar Bewerken> Kopiëren. Klik op de vectorvormlaag van uw onderste berichtvakachtergrond en ga naar Bewerken> Plakken. Hiermee plakt u de inhoud van de vormlaag op uw andere vormlaag. U kunt nu de vorm verwijderen die we in de vorige stap hebben getekend. Je zou de vorm nog steeds zichtbaar moeten zien.
Open de overvloeiopties van de onderste berichtvakachtergrond en pas een slagschaduw toe. Verander de kleur naar zwart, de dekking naar 25%, de afstand naar 1px en de grootte naar 3px. Dit zorgt voor een mooie subtiele slagschaduw.
Dupliceer deze laag en duw deze 5px omlaag. Herplaats de laag zodat deze onder uw origineel zit. Je zou moeten eindigen met iets soortgelijks als hieronder. Zoals u kunt zien, is dit een eenvoudige manier om een overlappende papieren look te creëren.
Herhaal de stap opnieuw zodat je drie stukjes papier hebt in plaats van slechts twee. Misschien wilt u uw onderste stuk papier een iets duidelijkere slagschaduw geven.
Stap 14: Navigatiebalkschaduw
U hebt waarschijnlijk gemerkt dat we tijdens het ontwerpen van onze berichtenvakken de meeste schaduwschaduw verborgen die onze navigatiebalk op onze achtergrond castte. Om dit te vervangen, kunt u uw berichten onder de navigatiebalk plaatsen (de eenvoudige optie maar niet realistisch) of de volgende stap voltooien.
Selecteer het gereedschap Rechthoekig selectiekader en teken een magere lijn boven aan uw berichten, vergelijkbaar met hierboven. Vul het met zwart op een nieuwe laag.
Ga naar Filter> Blur> Gaussian Blur en pas de vervaging toe. Dit werkt nu als een schaduw. Knip stukjes weg die de randen van de achtergrond van uw berichtendoos overlappen.
Stap 15: Profiel- en rapportknoppen
Teruggaand naar onze wireframes, hadden we besloten gebruikers toe te staan een bericht naar links te vegen om meer knoppen te onthullen. In dat geval kunnen die knoppen de gebruiker toestaan om het bericht met berichtposters te bekijken of de berichtaffiche te rapporteren.
Selecteer de lagen waaruit een van uw berichten bestaat (ik kies het bericht Homer Simpsons) en gebruik de shift-toets en de pijltjestoetsen om uw bericht 10px naar links naar links te duwen. Gebruik de teksttool om uw labels te schrijven en selecteer vervolgens enkele pictogrammen om met die labels te corresponderen. Ik koos een persoon voor een profiel en een doelwit voor rapportage (alsof je ze neerschiet - ik vond dit best leuk!).
Om dit gebied meer diepte te geven, heb ik een zwarte slagschaduw toegevoegd aan zowel de pictogrammen als de tekst.
Stap 16: Tekstveldbalk
De tekstveldbalk is een van de belangrijkste elementen op dit scherm. Gebruikers moeten hun berichten eenvoudig en zonder verwarring kunnen invoeren (daarom heb ik de verborgen verzendknop in de eerste geschetste concepten verwijderd).
Zoek om te beginnen uw achtergrondlaag en kopieer de laagstijlen. Plak deze laagstijlen op de tekstveldbalklaag die we eerder hebben gemaakt. Open de overvloeiopties voor deze laag en selecteer het lijnpaneel. Breng een lijn van 2 px aan de buitenkant van je vorm aan met zwart als kleur. Aangezien de lijn zich aan de buitenkant bevindt en de vorm drie randen van uw canvas raakt, wordt alleen de streek bovenop de vorm weergegeven.
Selecteer nu het tabblad binnenste schaduw en verander de overvloeimodus in normaal, de kleur in wit, de dekking op 10% en de afstand tot 2px. Zorg ervoor dat de hoek is ingesteld op de standaardinstelling voor globaal licht (90 graden) en klik op OK. Dit geeft ons een mooi hoogtepunt onder onze zwarte lijn. Met deze twee eenvoudige 2px-regels toegepast, ziet onze tekstveldbalk er al goed gescheiden van de rest van de achtergrond uit, hoewel deze dezelfde achtergrond heeft!
Selecteer het gereedschap Afgeronde rechthoek. Geef je gereedschap een hoge radius, ik gebruikte 50px; dit geeft het hele ronde (cirkelvormige) einden. Plaats een vorm op je balk, ik gebruikte 460x54 px als mijn afmetingen. Zorg ervoor dat de linkerkant van de vorm van uw tekstveld 20 px verwijderd is van de linkerkant van uw canvas om de ontwerpafstand consistent te houden.
Vul de vorm met een donkere kleur (ik gebruikte een bruin geselecteerd uit een donkere pixel op de achtergrond) en open vervolgens het paneel met laagstijlen. Breng een 2px witte slagschaduw aan op uw tekstveld met een dekking van 10%.
Klik op het deelvenster innerlijke schaduw en pas een innerlijke schaduw toe op de vorm van uw tekstveld. Hierdoor krijgt het veel meer diepte en lijkt het alsof het in de achtergrond van de balk is gesneden. Gebruik zwart met een mengmodus van vermenigvuldigen en een dekking van 25%. Ik gebruikte 5px als mijn afstand en 10px als mijn maat, hoewel je hier misschien wilt experimenteren.
Gebruik de teksttool en uitgerust met Arial Rounded MT Bold, typ "Write a comment ..." en plaats deze in uw tekstveld. Open de overvloeiopties voor je nieuwe tekstlaag en pas een zwarte slagschaduw toe met een dekking van 75%, een afstand van 2 px en een grootte van 3 px.
Stap 17: Tekstveldknop
Selecteer het gereedschap Afgeronde rechthoekige vorm opnieuw en gebruik dezelfde straalinstellingen en hoogte die we eerder hebben gebruikt, plaats een vorm op de achtergrond van uw tekstveldbalk. Pas de lengte van je knop aan zodat deze 10 px uit je tekstveld en 20 px uit de rechterrand van het canvas komt.
Klik met de rechtermuisknop op de laag van uw nieuwe knopvorm en selecteer mengopties. Selecteer het overlay-paneel met verloop en pas een verloop toe van licht (boven) naar donker (onder). Ik gebruikte de prachtige gele kleur in het kleurenpalet dat ik eerder had geselecteerd.
Om ons ontwerp consistent te houden, ga ik een lijn toepassen op onze knop waardoor het lijkt alsof het uit de achtergrond komt, net als bij de knoppen in de navigatiebalk. Deze keer heb ik effen zwart gebruikt in plaats van een verlooplijn omdat de achtergrond veel donkerder is en niet is gevuld met een verloop. Ik gebruikte een 2px-streek aan de binnenkant van mijn vorm met een dekking van 100%.
Selecteer het tekstgereedschap en typ "Verzenden" op uw knop. Open de overvloeiopties voor uw nieuwe tekstlaag en pas een bruine slagschaduw toe op uw tekst met een afstand van 1 px en een grootte van 3 px.
En daarmee zijn we klaar! We willen graag je resultaten zien, dus aarzel niet om ze te plaatsen in de comments hieronder. Als je het ontwerp in volledige resolutie wilt zien, kun je dat zien hier .