Share
In deze tutorial gebruiken we Adobe Photoshop om een gestroomlijnde webinterface te ontwerpen die voor elke mobiele app-website kan worden gebruikt. We zullen een scala aan technieken behandelen, waaronder vormen, texturen, maskers, aangepaste pictogrammen, typografie en nog veel meer die gemakkelijk kunnen worden aangepast en toegepast op uw eigen webontwerpen..
Opnieuw gepubliceerde zelfstudieOm de paar weken bekijken we enkele van onze favoriete lezers uit de geschiedenis van de site. Deze tutorial werd voor het eerst gepubliceerd in januari 2011.
Deze tutorial is gebaseerd op het donkere, schone website-ontwerp voor Leaflet, een iPhone-app ontworpen voor uitgevers van Envato-marketplace. Eric Alli van Trilab Media hielp met het ontwerpen en coderen van de site, dus hij zal ons door de stapsgewijze zelfstudie leiden. Of je nu een soortgelijk ontwerp voor je eigen projecten wilt gebruiken of gewoon wilt zien hoe het is gemaakt, er zijn tal van uitstekende trucs en technieken in deze zelfstudie die je kunt ophalen. Genieten!
Laten we beginnen met het maken van een nieuw Photoshop-document door Bestand> Nieuw te selecteren.
Stel zowel de breedte en hoogte van het canvas in op 1100px, resolutie op 72 en de achtergrondinhoud op wit.
Vervolgens moeten we twee hulplijnen maken die fungeren als de container voor onze pagina.
Selecteer Weergave> Nieuwe gids ...
Stel voor de eerste gids de richting in op verticaal en de positie op 70 px.
Selecteer voor de tweede gids nogmaals Weergave> Nieuwe gids ... en maak nog een verticale gids met de positie ingesteld op 1030 px.
We zouden nu een geschetste ruimte moeten hebben met een breedte van 960px voor onze pagina.
Volgende stap is de achtergrond. Selecteer het gereedschap Paint Bucket Tool (G) en zet je voorgrondkleurstaal op "1e1e1e". Klik vervolgens ergens op het canvas om de kleur toe te passen op onze achtergrondlaag.
Laten we ook een beetje textuur toevoegen aan onze achtergrond door Filter> Ruis> Ruis toevoegen ... te selecteren
Stel het bedrag in op 2,5 en klik op OK.
Vervolgens gaan we een spotlight maken dat helpt om focus toe te voegen aan het bovenste gedeelte van onze pagina.
Selecteer het penseel (B) en verander de hoofddiameter in 400px en zet de hardheid op 0%.
Maak een nieuwe laag door Laag te selecteren> Nieuw> Laag ... en geef hem de naam "Spotlight".
Wijzig je voorgrondkleurstaal in "FFFFFF" (wit) en maak een cirkel aan de bovenkant van het canvas met het penseel.
Als u de schijnwerper op de achtergrond wilt laten overvloeien, voegt u wat ruis toe aan de spotlightlaag door Filter> Ruis toevoegen ... te selecteren.
Stel het bedrag in op 20, controleer Monochromatisch en klik op OK.
Selecteer Filter> Vervagen> Gaussiaans vervagen om onze schijnwerpers te verzachten ...
Stel de straal in op 50.0 en klik op OK.
Zet tot slot de laagdekking op de Spotlight-laag op ongeveer 25%.
Vervolgens gaan we onze telefoonafbeeldingen toevoegen. Voor deze tutorial gebruik ik de iPhone-afbeelding van de prachtige Vector iPhone 4 PSD van Psdtuts +, die hier gratis kan worden gedownload. Houd er ook rekening mee dat u elke telefoonafbeelding kunt gebruiken die geschikt is voor uw specifieke behoeften (Android, Blackberry, enz ...).
Na het downloaden opent u de PSD in Photoshop. Vouw de map "Phones" uit in het deelvenster Lagen, klik met de rechtermuisknop op de map "FRONT" en selecteer Groep dupliceren ... Geef hier de groep een herkenbare naam (ik gebruikte "iPhone"), stel de bestemming in op "Leaflet" (of wat dan ook) heeft u uw PSD genoemd voor deze zelfstudie) en klikt u op OK. Als je klaar bent, sluit je deze PSD.
Plaats onze eerste iPhone door de linkergeleider aan te raken en ongeveer 100 px vanaf de bovenkant van het canvas.
Dit is ook een goed moment om de schermafbeelding in de iPhone aan te passen.
Een eenvoudige manier om dit te doen, is door de map "iPhone" uit te breiden in ons lagenpaneel en vervolgens te klikken op de map "SCREEN INHOUD". Selecteer nu Bestand> Plaatsen, kies uw screenshot uit de browser en klik op Plaatsen.
Sleep de laag die je hebt geplaatst over de iPhone en wijzig de grootte om in het scherm te passen. Als u klaar bent, klikt u op Enter om de wijzigingen op te slaan.
Dupliceer de "iPhone" -groep door Laag te selecteren> Groep dupliceren ... noem deze "iPhone 2" en klik op OK in het dialoogvenster.
Selecteer Bewerken> Transformeren> Schalen en vouw de gedupliceerde iPhone uit naar 107.0% breedte en hoogte. Plaats deze iPhone ongeveer 50px vanaf de bovenkant en 200px vanaf de linkerwijzer.
Herhaal de bovenstaande stap om het screenshot in de map "iPhone 2" te vervangen.
De laatste hand aan onze iPhones is om er een reflectie van te maken. Laten we beginnen door beide iPhone-groepen te selecteren ("iPhone" en "iPhone 2") en vervolgens Laag> Dubbele lagen ... te selecteren en op OK te klikken. Selecteer vervolgens Laag> Lagen samenvoegen.
Vervolgens moeten we onze iPhones ondersteboven keren. Selecteer Bewerken> Transformeren> Verticaal spiegelen en plaats de gespiegelde laag direct onder de originele iPhones.
Voeg een laagmasker toe door op het pictogram Laagmasker in het deelvenster Lagen te klikken.
Selecteer het gereedschap Verloop (G) en kies een zwart-witstaal. Teken een lijn van boven naar beneden op de gespiegelde iPhones die ongeveer 50px hoog is.
Laat als laatste de dekking van de laag op 30% komen.
Vervolgens moeten we de belangrijkste gegevens van onze app rechts van onze telefoons toevoegen. Voordat we beginnen, laten we nog een gids toevoegen om dingen op één lijn te houden. Selecteer Weergave> Nieuwe gids ... selecteer "Verticaal" voor oriëntatie en 550 px voor positie.
Op ongeveer 100 px vanaf de bovenkant van ons canvas gaan we ons logo toevoegen. Ik gebruik een logo dat ik eerder heb gemaakt, je kunt gewoon tekst gebruiken of je eigen logo hier invoegen.
Onder het logo gaan we een alinea toevoegen voor de beschrijving van onze app. Selecteer het gereedschap Horizontale soort (T) en teken een rechthoek tussen de middelste geleider en de rechter geleider. Stel de tekeninstellingen als volgt in:
Vervolgens maken we een knop voor bezoekers om onze app te kopen. Gebruik het gereedschap Afgeronde rechthoek (U) om een rechthoek van 240 x 75 px te tekenen met een straal van 4 px. Lijn het uit zodat de linkerkant van de knop de middelste geleider raakt en deze 45 px onder de tekst ligt.
Nu zullen we enkele laagstijlen toepassen. Dubbelklik op de rechterkant van de laag in het Lagenpaneel en gebruik de onderstaande afbeelding ter referentie.
Om het Apple-pictogram toe te voegen, tekent u een klein tekstvak binnen de knop met het gereedschap Horizontale tekst (T) en vervolgens kopieert en plakt u dit symbool: in het tekstvak en stelt u de tekeninstellingen als volgt in:
Wijzig ten slotte de dekking van deze laag naar 30%.
Maak een nieuw tekstvak aan de rechterkant en voeg twee regels tekst toe (bijvoorbeeld: "Nu downloaden in de App Store"). Pas de volgende tekeninstellingen toe:
Voeg een laagstijl toe aan deze tekst met behulp van de volgende afbeelding voor referentie:
Vervolgens gaan we een scheidingsteken toevoegen aan de rechterkant van de tekst die we zojuist hebben toegevoegd. Selecteer het lijngereedschap (U) en houd de SHIFT-toets ingedrukt, teken een 1px-regel vanaf de bovenkant van de knop naar beneden en verander vervolgens de lijnkleur naar "FFFFFF" (wit).
Wijzig de dekking van deze regel in 15% en dupliceer deze door Laag> Laag dupliceren ... te selecteren en klik op OK. Wijzig de kleur van deze gedupliceerde regel in # 000000 (zwart) en wijzig de dekking op 10%. Verplaats vervolgens de gedupliceerde lijn 1 px naar links.
Het laatste element dat aan deze knop moet worden toegevoegd, is een pictogram dat aangeeft dat het is gedownload. Begin met het selecteren van de Ellipse Tool (U) en maak een cirkel met een diameter van 25px.
Voeg vervolgens de volgende laagstijlen toe:
Pak tot slot het aangepaste vormgereedschap (U) en kies een pijlvorm (ik gebruik een standaardvorm met de naam "Pijl 9"). Maak een kleine pijl met een breedte van 10 px in de cirkel en verander de kleur in "FFFFFF" (wit).
Nu om een klein vakje te maken om de prijs van onze app weer te geven. Selecteer het gereedschap Afgeronde rechthoek (U), stel de straal in op 4px en maak een rechthoek die onze downloadknop overlapt en is 52px in hoogte en elke breedte groter dan 100px.
Verander de kleur van dit vak in "2B2B2B" en verplaats het onder de downloadknop in het Lagenpaneel.
Voeg vervolgens een Lijnstijl toe aan dit vak met de volgende instellingen:
Nu kunnen we de actuele prijsinformatie toevoegen. Hiervoor gaan we twee aparte tekstvakken maken, omdat de inhoud binnenin een andere stijl vereist.
Voeg voor het eerste tekstvak wat tekst toe (ik gebruikte "ONLY") en pas de volgende tekeninstellingen toe:
Voeg voor het tweede tekstvak uw prijs toe (ik gebruikte "$ 1,99") en pas de volgende tekeninstellingen toe:
We gaan verder naar het onderste gedeelte van onze pagina, we moeten wat scheiding creëren. Hiervoor gebruiken we de tweeregelige techniek die we eerder op de downloadknop hebben toegepast om de scheidingsteken een "ingezette" look te geven.
Selecteer het lijngereedschap (U) en houd de SHIFT-toets ingedrukt, teken een 1px-lijn van de linkergids naar de rechterwijzer en verander vervolgens de lijnkleur naar "000000" (zwart).
Verander de dekking van deze regel naar 80% en dupliceer deze door Laag> Duplicaat Laag ... te selecteren en klik op OK. Verander de kleur van deze gedupliceerde lijn naar "FFFFFF" (wit) en verander de dekking naar 10%. Verplaats vervolgens de gedupliceerde lijn 1 px naar beneden zodat deze onder de zwarte lijn staat.
In het gedeelte onder het scheidingsteken dat we zojuist hebben gemaakt, voegen we twee kolommen toe, voor schermafbeeldingen en een lijst met functies.
Beginnend met schermafbeeldingen, begin je met het importeren van je eerste screenshot door Bestand> Plaatsen te selecteren. Kies onze schermafbeelding uit de bestandsbrowser en klik op Plaatsen. Verklein de schermafbeelding tot 80% breedte en hoogte, verplaats vervolgens het screenshot in de buurt van de linkerwijzer en klik op Enter.
Selecteer de laag in het Lagenpaneel en klik twee keer op de knop "Masker toevoegen" om een Vectormasker toe te voegen.
Selecteer nu het gereedschap Afgeronde rechthoek (U) en verander de straal in 6 px en maak een rechthoek over het screenshot met de grootte van 175x120 px.
Ten slotte voegen we een Lijnstijl toe met de volgende instellingen:
Herhaal de bovenstaande stappen voor al je screenshots en geef ze 35px ruimte tussen elkaar.
Als u onze schermafbeeldingen van de functies wilt scheiden, tekent u een 1 px-regel vanaf de bovenkant van de eerste schermafbeelding tot de onderkant van de laatste schermafbeelding die rond de 55 px is vanaf de schermafbeeldingen.
Wijzig de lijnkleur in "FFFFFF" (wit) en zet de dekking op 5%.
Laten we een titel toevoegen waarin onze functies worden beschreven (ik heb 'Leaflet-functies' gebruikt). Plaats de tekst 55px van de linker scheidingslijn en gebruik de volgende tekeninstellingen:
Laten we nu onze lijst met functies maken en deze onder de titel plaatsen. Maak een tekstvak en voeg vijf of zes regels met functies toe en geef ze de volgende tekeninstellingen:
Herhaal de bovenstaande stappen om de vereisten van de app toe te voegen.
Om onze lijst met functies te laten opvallen, maken we enkele eenvoudige, aangepaste opsommingstekens.
Begin met het verplaatsen van de lijst met functies in tekstvak 25 px naar rechts.
Selecteer nu het Ellips-gereedschap (U) en maak een cirkel met een diameter van 9px links van de eerste functie. Verander de kleur van de cirkel in "bce086".
Voeg de volgende laagstijl toe aan de cirkel:
Nu moeten we onze kogels dupliceren en afstemmen op elke functie. Begin met het dupliceren van de cirkellaag door de laag te selecteren en vervolgens te klikken op Laag> Duplicaatlaag ...
Verplaats vervolgens de gedupliceerde laag 28px omlaag (de hoeveelheid Leading die we hebben toegepast op de lijst met elementen). Herhaal de bovenstaande stappen drie keer.
We gaan verder naar het voettekstgedeelte van onze pagina en passen opnieuw de tweeregelige techniek toe die we eerder hebben toegepast Stap 9 om wat scheiding toe te voegen.
Nu kunnen we enkele nuttige links toevoegen aan ons voettekstgebied. Eerst moeten we vier tekstvakken naast elkaar maken die onze links bevatten.
Begin met het maken van een tekstvak van ongeveer 160x40px. Voeg wat tekst toe en herhaal 3 keer. Hier is wat voorbeeldtekst die u kunt gebruiken:
Gebruik het volgende voor de tekeninstellingen:
Zoals u wellicht opmerkt, zijn onze vakken ongelijk en niet goed uitgelijnd, geen zorgen, we zullen dit in de volgende stap oplossen.
Om onze uitlijningsproblemen op te lossen, plaatst u eerst de vier tekstvakken die we hierboven hebben gemaakt in een map en noem deze "Voettekst".
Plaats eerst het eerste tekstvak 55px van de linkerwijzer en het laatste tekstvak de rechtergids.
Selecteer nu de vier tekstlagen in de voettekstmap en pak het verplaatsgereedschap (V). Klik op de knop Uitlijning van de verticale centra en klik vervolgens op de knop Centreren van centra verplaatsen op de werkbalk Verplaatsen.
Nu kunnen we enkele aangepaste pictogrammen toevoegen om onze links te accentueren.
Selecteer het Ellipsgereedschap (U) en maak een cirkel met een diameter van 36 px in de buurt van ons eerste tekstvak. Verander de kleur van deze cirkel in "FFFFFF" (wit).
Selecteer nu Laag> Rasteren> Laag.
Het volgende is om ons pictogram aan deze cirkel toe te voegen. Voor het eerste pictogram gebruik ik de Twitter "t" die ik hier gratis heb gedownload.
Zodra je het hebt gedownload, selecteer je Bestand> Plaatsen in photoshop om het pictogram in ons document te importeren. Importeer het formaat van het pictogram naar 28% breedte en hoogte, plaats het boven onze cirkel en klik vervolgens op Enter.
Klik vervolgens met de rechtermuisknop op de miniatuur van het Twitter-pictogram in het lagenpaneel en klik op Selecteer pixels.
Selecteer nu de cirkellaag in het Lagenpaneel en selecteer vervolgens Bewerken> Wissen.
Verwijder het geïmporteerde Twitter-pictogram door het te selecteren in het deelvenster Lagen en klik of sleep het naar het prullenbakpictogram.
Verlaag ten slotte de dekking van de cirkellaag tot 15%.
Herhaal de stappen voor de rest van de pictogrammen hierboven Stap 18 door andere pictogrammen te gebruiken of met aangepaste vormen in photoshop.
Voeg een kleuraccent toe om ze beter af te stemmen op onze footer-links.
Gebruik het gereedschap Horizontale tekst (T) om een deel van de tekst in elk tekstvak te markeren en de kleur ervan in "83b546" te wijzigen.
Dat is alles! Ik hoop dat je deze tutorial leuk vond en een aantal nuttige technieken hebt gevonden die je kunt aanpassen / toepassen op je volgende ontwerp.
Accentsconagua