Niranth; Vertaling: Slutskaja Svetlana

Het creëren van aantrekkelijke en functionele weblay-outs is een integraal onderdeel van het leven van een webontwerper. In deze les Photoshoppen we zullen vanaf het begin een professionele website-indeling maken. Tijdens de les leer je er wat van handige trucjes bij het maken van een ontwerp.

Lesbronnen:

1. Pictogrammenset (wefunction.com)
   Alternatieve pictogramserie
2. Twitter-pictogram (iconeden.com)
3. Lettertype Bebas (dafont.com)

Stap 1. Mockup

Voordat we beginnen met het maken van een website-indeling, moeten we een schetsplan maken van de toekomstige lay-out, die de functionaliteit ervan en bij benadering zal laten zien verschijning.

Stap 2. Maak een document.

We maken een website-indeling van 960 pixels breed. Om dit te doen, creëert u nieuw document formaat 1200x1500 pixels. Resolutie 72 pixels.

Omdat de lay-out van de site 960 pixels breed zal zijn, moeten we dit gebied definiëren door hulplijnen toe te voegen. Selecteer het hele document ( Ctrl+A).

Ga naar menu Selecteren - Selectie transformeren(Selecteer > Selectie transformeren). Stel in de eigenschappenbalk bovenaan het scherm de breedte in op 960 pixels. Dit wordt het werkgebied van de lay-out.

Plaats de hulplijnen precies langs de grenzen van de selectie.

We moeten een marge creëren tussen de randen van het lay-outwerkgebied en het inhoudsgebied dat we later zullen toevoegen. Ga terwijl het document actief is geselecteerd opnieuw naar het menu Selectie - Selectie transformeren(Selecteer > Selectie transformeren). Verklein de breedte van de selectie naar 920 pixels. Dit betekent dat er aan elke kant van de lay-out 20 pixels opvulling is, voor een totaal van 40 pixels.

Stel richtlijnen op voor de nieuwe selectie:

Stap 3. Maak de sitekop.

Laten we verder gaan met het maken van de sitekop. Maak een selectie van 465px hoog bovenaan de lay-out.

Vul de selectie grijs en gebruik vervolgens laagstijlen om kleuren en verlopen toe te passen.

Voeg een verloopvulling toe aan de koptekst met behulp van een laagstijl Verloopoverlay(Verloopoverlay). Maak een verloop van twee kleuren.

De koptekst ziet er nu als volgt uit:

Nu moet je verlichting aan de header toevoegen. Creëren nieuwe laag (Ctrl+Alt+Shift+N) en selecteer een zachte borstel met een grootte van 600 pixels. Selecteer de kleur #19535a en gebruik het penseel om eenmaal midden bovenaan de kop te klikken.

Maak een selectie van 110 px in de koptekst.

Druk op de toets Verwijderen om het geselecteerde deel te verwijderen.

Draai de markeerlaag verticaal om (Ctrl+T).

Je moet ervoor zorgen dat de lichtvlek op de dop precies in het midden zit. Om dit te doen, maakt u de lagen met de koptekst en markering actief en selecteert u het gereedschap Bewegen(Verplaatsingsgereedschap) (V). Klik op de eigenschappenbalk boven aan het scherm op de knop Horizontale middelpunten uitlijnen.

Maak een nieuwe laag (Shift+Ctrl+N) en teken met het gereedschap Potlood(Potloodgereedschap) een punt, 1 pixel groot. Gebruik voor het tekenen kleur #01bfd2.

Laten we de randen van deze laag gladstrijken met een verloopmasker. Selecteer een hulpmiddel Verloop(Hulpmiddel Verloop) en maak een verloop zoals hieronder weergegeven:

Breng een nieuwe laag aan met een masker en vul deze met het verloop dat je zojuist hebt gemaakt.

Stap 4. Maak een patroon

Laten we nu een eenvoudig patroon maken dat we aan de koptekst zullen toevoegen. Hulpmiddel Potlood(Pencil Tool) met een grootte van 2 pixels, teken twee punten, zoals weergegeven in de afbeelding. Schakel de zichtbaarheid van de achtergrondlaag een tijdje uit (klik op het oogpictogram naast de achtergrondlaag) en maak een patroon (Bewerken - Patroon definiëren)(Bewerken > Patroon definiëren):

Maak een nieuwe laag (Shift+Ctrl+N) en plaats deze onder de markeerlaag. Selecteer het gebied waarop u het patroon wilt toepassen en open het venster Vullen(Vullen) (Shift + F5). Klik op OK.

Na het toevoegen van de textuur ziet de header er als volgt uit:

Doen soepele overgang van het patroon naar de kop: voeg een masker toe aan de patroonlaag en gebruik een zachte borstel wit(#ffffff) met dekking 60% ga over het masker.

Resultaat:

Stap 5. Voeg een logo toe

Laten we verder gaan met het toevoegen van een logo. Selecteer een zachte borstel met de kleur #19535a en schilder een plek.

Schrijf de tekst:

Voeg een laagstijl toe aan de logolaag Schaduw(Slagschaduw).

Stap 6: Navigatie

Navigatietekst toevoegen.

Teken een navigatieknop met behulp van het rechthoekige selectiekader. Vul de selectie met een willekeurige kleur en verlaag de parameter Fill naar nul.

Voeg een stijl toe aan de knoplaag Verloopoverlay(Verloopoverlay).

Stap 7: Inhoudsschuifregelaar

Maak een selectie van 580x295 pixels.

Vul de selectie met een willekeurige grijstint.

Plaats een afbeelding. Knip het uit met de laag die u eerder hebt gemaakt.

Laten we nu een effect aan de schuifregelaar toevoegen. Maak een nieuwe laag (Shift+Ctrl+N), selecteer Borstel(Penseel) met een diameter van 400 pixels. Open het penseelpalet (F5) en stel de parameters in die in de schermafbeelding worden weergegeven:

Selecteer de zwarte kleur (#000000) en teken een vlek:

Pas een filter toe om de randen te verzachten Gaussiaanse vervaging(Gaussiaanse vervaging).

Selecteer de onderste helft van de schaduw en verwijder deze (Verwijderen).

Plaats de schaduwlaag boven de schuifregelaar:

Knijp de schaduwlaag samen bij het middelste handvat (Ctrl+T) en centreer vervolgens de schaduwlaag opnieuw: selecteer beide lagen en klik op de knop in het eigenschappenpaneel Centreren horizontaal uitlijnen(Horizontale middelpunten uitlijnen).

Dupliceer de schaduwlaag (Ctrl+J) en plaats het duplicaat op de onderrand van de schuifregelaar.

Teken knoppen op de schuifregelaar met behulp van het gereedschap Rechthoekige feesttent(Rechthoekig selectiekader ) . Vul de knoppen met zwart (#000000).

Verlaag de dekking van de knoplaag naar 50%.

Voeg een pijlvorm toe aan uw schuifknoppen:

Teken onderaan de schuifregelaar een streep en vul deze met zwart (#000000).

Verlaag de dekking van de streeplaag naar 50%.

Voeg een beschrijving van uw project toe aan deze balk:

Stap 8. Voeg een begroetingstekst toe

Schrijf een begroetingstekst:

Stap 9. De sitekop voltooien

We zijn bijna klaar met het werken aan de sitekop. Voeg een subtiele schaduw toe met behulp van het gereedschap Borstel(Penseel).

Laat een opening van 1 pixel tussen de schaduw en de titel.

Maak een nieuwe laag onder de koptekstlaag (Shift+Ctrl+N) en pas er een verloop op toe.

Stap 10. Voeg knoppen toe voor de schuifregelaar

Teken diawisselknoppen.

Voeg een laagstijl toe aan één knop Innerlijke schaduw (Innerlijke schaduw) en dupliceer vervolgens de knoplaag het vereiste aantal keren (Ctrl+J).

Stap 12. Maak een inhoudscheidingsteken

Gebruik het potloodgereedschap en teken een lichtgrijze (#aaaaaa) lijn van 1 pixel breed.

Voeg een masker toe aan de lijnlaag en gebruik een verloop om een ​​vloeiende overgang aan de randen te creëren.

Stap 13. Voeg inhoud toe

Het is tijd om gebieden voor inhoud toe te voegen. Het inhoudsgebied wordt verdeeld in 3 kolommen op gelijke afstand van elkaar. Tussen elke kolom bevindt zich een inspringing van 25 pixels.

Voordat we beginnen met het ontwerpen van de lay-out van een website, hebben we een schets nodig die het uiterlijk en de functionaliteit laat zien. Voor de schets heb ik alleen grijstinten gebruikt om me in het algemeen op de "lay-out" te concentreren en me nog niet druk te maken over kleuren. Hierdoor kun je op elk moment snel iets ruilen of opnieuw doen.

2. Maak een document

De lay-out van de site zal 960 pixels breed zijn, dus we moeten een document maken met afmetingen van 1200x1500 pixels, met een resolutie van 72 pixels/inch.

We hebben de breedte bepaald, nu moeten we dit gebied aanduiden met . Druk op Ctrl + A om het hele document te selecteren.

Ga naar Selecteren en selecteer Selectie transformeren. Stel in de optiebalk bovenaan de breedte in op 960, dit is het werkgebied van de toekomstige lay-out.

Plaats hulplijnen langs de randen van de selectie.

Nu gaan we een marge creëren tussen de rand van het werkgebied en het gebied voor de inhoud die later wordt toegevoegd. Zorg ervoor dat er een selectie actief is en ga vervolgens opnieuw naar het menu Selecteren > Selectie transformeren (Selectie - Geselecteerd gebied transformeren). Verklein de breedte naar 920 pixels. Dit betekent dat er aan beide zijden van de lay-out een inspringing van 20 pixels verschijnt, en in totaal 40 pixels.

Laten we nog twee verticale hulplijnen toevoegen langs de randen van de nieuwe selectie.

3. Een sitekop maken

Maak bovenaan de lay-out een selectie van 465 px hoog.

Vul het geselecteerde gebied met een grijze tint; even later zullen we er laagstijlen op toepassen om de kleur te veranderen.

Voeg een verloop toe aan de koptekst met behulp van de stijl Verloopoverlay. Het verloop bestaat uit twee kleuren #0f201c en #002931.

Dit is wat je zou moeten krijgen:

Laten we nu wat verlichting aan de kop toevoegen. Neem een ​​penseel met zachte randen met een diameter van 600px, kleur - #19535a en klik op een nieuwe laag op het penseel midden bovenaan de kop.

Maak bovenaan de kop een selectie van 110 px.

Door op de Delete-toets te drukken, verwijdert u het geselecteerde gebied.

Gebruik Vrije transformatie (Ctrl + T) en draai de markeringslaag verticaal.

Zorg ervoor dat het koplamplicht perfect gecentreerd is. Om dit te doen activeert u de lagen met markering en koptekst en selecteert u Verplaatsen (V) op de werkbalk. Selecteer bovenaan de optiebalk de optie Horizontale middelpunten uitlijnen.

Nadat u een nieuwe laag hebt gemaakt, gebruikt u het potloodgereedschap (B) om een ​​lijn van 1 px over de breedte van het hele document te tekenen. Kleur - #01bfd2.

Gebruik een verloopmasker om de randen van de gemaakte lijn glad te strijken. Neem het gereedschap Verloop (G) en pas het aan zoals in de onderstaande schermafbeelding:

Vul de gemaakte laag met een verloop.

4. Een patroon creëren

We versieren de koptekst van de lay-out met een geruit patroon. Teken met een potlood van 2 pixels twee diagonaal geplaatste punten. Schakel het een tijdje uit achtergrondlaag door op het oog naast de miniatuur van de achtergrondlaag te klikken. Maak vervolgens een patroon door naar het menu Bewerken te gaan en Patroon definiëren te selecteren.

Maak onder de markering een nieuwe laag. Selecteer het gebied waarop u het patroon wilt toepassen. Door op te drukken Shift-toetsen+ F5 vul de kop in.

Resultaat:

Het enige dat overblijft is een vloeiende overgang van het patroon naar de hoed. Nadat je een masker aan de patroonlaag hebt toegevoegd, maak je een vloeiende overgang met een zachte witte borstel met een dekking van 60%.

Bekijk het resultaat:

5. Een logo toevoegen

Een logo is een integraal onderdeel van elke website. Om het te maken, neem je een zachte borstel, stel je de kleur in op #19535a en schilder je een plek in de linkerbovenhoek.

Schrijf vervolgens de tekst voor het logo.

Pas er de volgende effecten op toe:

Verloopoverlay:

6. Navigatie

Maak een knop voor de geselecteerde navigatiecategorie met behulp van het Rechthoekig selectiekadergereedschap (M). Vul het geselecteerde gebied met een willekeurige kleur en verlaag de vulwaarde naar 0%.

7. Inhoudsschuifregelaar

Maak een selectiegebied van 580x295 pixels.

Vul het geselecteerde gebied met elke tint grijs.

Plaats de afbeelding erbovenop en bevestig deze aan de onderste laag.

U moet een schaduw aan de schuifregelaar toevoegen. Nadat u een nieuwe laag hebt gemaakt, neemt u het penseel (B) met een grootte van 400 px en drukt u op de F5-toets om het venster met penseelinstellingen te openen. Zie onderstaande afbeelding voor alle instellingen.

Zet de kleur op zwart en teken een vlek.

Gebruik het Gaussiaans vervagen-filter om de randen te verzachten.

Maak een selectie voor de onderste helft van de schaduw en verwijder deze.

Plaats de schaduw bovenaan de schuifregelaar.

Verklein eerst de schaduw een beetje en centreer deze vervolgens met behulp van de functie Horizontale middelpunten uitlijnen.

Dupliceer de schaduw en plaats een kopie onder aan de schuifregelaar.

Gebruik het rechthoekig selectiekadergereedschap (M) op de schuifregelaar, maak twee knoppen en vul ze met zwart.

Voor de knoplaag verlaag je de dekking naar 50%.

Gebruik standaard Photoshop-vormen en voeg pijlen toe aan de knoppen.

Maak een streep aan de onderkant van de slider en vul deze met zwart.

Voor de streep verlaag je de dekking naar 50%.

Hier kunt u een beschrijving van uw project toevoegen.

8. Welkomsttekst

Voer links van de schuifregelaar uw begroetingstekst in.

9. De koptekst voltooien

We zijn de werkzaamheden aan de kop aan het afronden. En gebruik ten slotte een penseel om een ​​enigszins opvallende schaduw toe te voegen.

Laat een afstand van 1 pixel tussen de schaduw en de titel.

Maak een nieuwe laag onder de koptekstlaag. Breng er een verloop op aan.

10. Knoppen voor de schuifregelaar

Het is tijd om knoppen toe te voegen om van dia te wisselen.

Pas een laagstijl Innerlijke schaduw toe op de eerste knop om deze actief te maken.

11. Inhoudscheider

Teken net onder de knoppen voor de schuifregelaar een lijn in de lichtgrijze kleur #aaaaaa, 1 px breed.

Nadat je een masker aan de lijn hebt toegevoegd, maak je een vloeiende overgang aan de randen met behulp van een verloop. We hebben een scheidslijn gecreëerd.

12. Inhoud toevoegen

Laten we nu gebieden toevoegen voor het inhoudsgedeelte. Ze worden verdeeld in 3 kolommen met een inspringing van 25px.

Plaats verticale geleiders aan beide uiteinden van de luidsprekers.

Voeg voor elke kolom een ​​titel en een geschikt pictogram toe. Voeg onder de kopjes inhoud toe.

Het gereedschap Rechthoek gebruiken afgeronde hoeken, maak een knop Lees meer. Zorg ervoor dat de vormmodus is geselecteerd op de optiebalk.

Pas de stijlen Verloopoverlay en Lijn op de knop toe.

Dupliceer de knop Meer lezen (Ctrl + J) nog twee keer en plaats ze in elke kolom onder de inhoud.

Net als voorheen moet je een scheidingslijn maken en deze onder de knoppen plaatsen. Plaats hieronder grijze rechthoeken en pas de lijnstijl erop toe.

Plaats een afbeelding op elke rechthoek.

Maak schaduwen zoals voorheen en plaats ze onder de afbeeldingsgebieden.

Plaats onder elke afbeelding een titel, inhoud, een knop Lees meer en een scheidingslijn.

Plaats het Twitter-icoontje hieronder in de eerste kolom.

Plaats dan een bericht op Twitter.

Teken nog een knop Meer Tweets.

Pas de stijlen Verloopoverlay en Lijn op deze knop toe:

Schrijf de tekst Meer Tweets erop.

13. Maak een voettekst

Maak helemaal onderaan de site-indeling een geselecteerd gebied en vul dit met grijs.

Pas een kleuroverlaystijl toe op de voettekst.

Plaats ten slotte navigatie en copyright in de voettekst.

De site-indeling is klaar!

Inhoud Website-indelingen maken: entertainment voor de elite Een website-indeling ontwikkelen: fasen Methode nr. 1. Een lay-out uit een websitesjabloon knippen Methode nr. 2. Een website-indeling maken in bijna Photoshop-methode nr. 3. Online mockuptool

Denk er om te beginnen over na waarom heb je besloten om zelf een website-indeling te maken?. Deze baan vereist veelzijdige kennis van een persoon in IT en design, analytisch en creatief denken tegelijk. En ook een deel van je tijd. Oké, er zijn vier redenen waarom je dit misschien nodig hebt. Als je een andere hebt, schrijf dan in de reacties, ik zal deze toevoegen.

Website-indelingen maken: leuk voor de elite

Reden #1. Interesse in het ontwikkelen van website-indelingen

Zijn uw interesses zeer specifiek? Wij zijn hier wij veroordelen niemand. Er was een tijd dat het interessant voor ons werd, en we zijn ermee begonnen! Bovendien is de honger naar kennis de onze onderscheidend kenmerk. Ik waardeer je nieuwsgierigheid.

Reden #2. Ontwikkeling van website-indeling als een manier om geld te verdienen

Als je in de toekomst webdesigner wilt worden, je moet ergens beginnen, namelijk vanuit de elementaire lay-out van de sitepagina. Snelle resultaten motiveert zijn werk als geen ander. Gelukkig suggereer ik in dit artikel alleen maar blitz manieren om een ​​lay-out te maken.

Het werk van een webdesigner is trouwens geen grap. Hieronder laat ik eenvoudigweg een salarisschema achter, afhankelijk van de diensttijd (volgens DOU-gegevens voor mei-juni 2016). Ik zinspeel nergens op. Gewoon verborgen jagen.

Reden #3. Opstellen van technische specificaties voor de ontwikkeling van een website layout voor een ontwerper

Vaak worden niet-ontwerpers geconfronteerd met de noodzaak om de lay-out van een website te laten zien - soms gewoon om uw idee te illustreren, maar soms technische specificaties te versterken. Dit is natuurlijk niet nodig en een competente ontwerper zal uw idee begrijpen en het zelfs beter uitvoeren dan u verwacht. Als u echter precies weet wat u wilt, kunt u het beter laten zien dan vertellen.

De app is ook handig in gebruik Koggle, die u kunt aansluiten NaarGooglenDrijfveer.

Ik hou van Coggle omdat het een mindmap is. altijd bij de hand, het is handig om te delen met collega's en de kleuren van de interface-elementen zijn goed gekozen. Bovendien werkt het rechter knop muis, waarmee u de kaart goed kunt aanpassen. Ik heb deze structuur voor startpagina plaats.

In de eerste fase van het ontwerpen van de lay-out wordt een mindmap van de site gemaakt

Fase 2: Het maken van een website-prototype

Vervolgens kunt u meteen beginnen met het tekenen van een website-indeling in Photoshop, maar zelfs als u een lay-out maakt uit ijdele nieuwsgierigheid: eerst je zou een website-prototype moeten tekenen. Bij stap voor stap ontwikkeling is prototyping een integrale fase die de mentale gezondheid van een webontwerper versterkt. Bij het maken van een prototype wordt dit gepland sleutelblokken van de toekomstige site(header, slider, knoppen, contacten, materiaalstructuur, etc.). Hierdoor kunt u aanzienlijk tijd besparen in de fase van het tekenen van de lay-out, omdat u kunt het geschatte resultaat zien en pijnloos wijzigingen aanbrengen.

Moe? Maak het leven gemakkelijker en bestel website-ontwikkeling bij KOLORO. Wij houden rekening met uw wensen en u krijgt precies wat u wilde.

Online een website-prototype maken

Ik gebruik meestal de twee populairste online tools voor het maken van prototypen van websites: Moqups en Mockflow. In beide gevallen is dat zo mogelijkheid om gratis prototypes te maken, maar met beperkte functionaliteit. De tarieven voor de eerste site beginnen bij $ 13/maand. (10 projecten, 1 GB), en voor de tweede - vanaf $ 14/maand. (onbeperkt aantal projecten + 25 GB in de cloud). Iedereen raadt ook Mockingbird aan. En ik zal het aanbevelen, maar alleen uit respect voor Eminem, omdat hier 3 projecten $ 12 per maand kosten en er minder gratis tools zijn.

Nu over mijn persoonlijke indrukken. Moqups handiger en intuïtiever zelfs vanaf het eerste bezoek. Er zijn hier veel kant-en-klare blokken en pictogrammen - precies wat je nodig hebt om snel door de prototypefase te komen. Bovendien zijn de elementen handig centrum ten opzichte van het midden van de pagina of andere elementen. Een beetje verontrustend beperking 300 objecten per pagina gratis modus- voor een website-indeling van één pagina is dit misschien niet voldoende. Het is mogelijk om elementen uit het Bootstrap-werkframe in te voegen. Mockflow stelt je in staat iets minder te doen, en je hoeft het alleen maar binnen een paar minuten uit te zoeken en wennen echter voor hem meer schijfruimte zou iemand kunnen aantrekken.

Website-prototypes in Moqups en Mockflow

Hoe maak je een prototype van een toekomstige website?

Laten we eens kijken naar het voorbeeld van Moqups hoe u een paginaprototype maakt met tekst voor de blog.

Stap 1. Toevoegen hoed(de tekst kan worden gewijzigd).

Stap 2. Toevoegen blok voor de foto en inscriptie (titel van het artikel). Met behulp van stijlen kunt u gemakkelijk de grootte, het lettertype en andere tekstopmaak wijzigen.

Stap 3. Toevoegen tekst en vraag breedte kolommen. Alle blokken zijn handig gecentreerd ten opzichte van het midden van de pagina.

Stap 4. De tekst moet worden opgesplitst afbeelding. En de kolombreedte is te groot, 500 px zou beter zijn. Gelukkig kun je dit snel veranderen. Een groot pluspunt: de geselecteerde elementen zijn ten opzichte van elkaar verkleind en ook mijn blok met de afbeelding is kleiner geworden.

Stap 5. Toevoegen zijbalk(zijkolom), het zal hier eenvoudig zijn. Laten we een veld plaatsen voor zoekopdracht en een blok voor abonnementen naar de nieuwsbrief (met een aantrekkelijke foto en een heldere knop).

Stap 6. Laten we zeggen dat ons artikel zo klein bleek te zijn. Je kunt ook toevoegen vragenlijst En beoordeling artikelen. Het resultaat was een mooi prototype van een blogpagina. Voeg naar eigen smaak andere elementen toe.

Prototyping maakt dit mogelijk zie de schaal van de pagina en beslissingen nemen over bepaalde blokken. Met deze tools kun je trouwens prototypes maken verschillende apparaten. Als je het bijvoorbeeld probeert, krijg je zoiets als dit. Het prototype beperkt zich echter meestal tot een zwart-wit ontwerp.

Prototype voor smartphone-applicatie

Fase 3: Een mooie website-indeling maken: een kleur kiezen

Afhankelijk van de succesvolle kleurkeuze perceptie van de locatie En merk door gebruikers. Ik raad je niet aan om op je eigen kracht te vertrouwen; het kiezen van de juiste kleur kan uren duren. Daarom raad ik aan om te gebruiken kant-en-klare kleurenpaletten voor internet. Google heeft onlangs een gedetailleerde handleiding uitgebracht over goede kleuren voor materiaal ontwerp (webdesigntrend). Deze kleuren passen harmonieus bij elkaar en u kunt zeker zijn van hun aantrekkelijkheid. Met Materialpalette kunt u met succes twee kleuren selecteren: de hoofdkleur en het accent, en ook zien hoe ze er in de interface uit zullen zien. Een beetje meer kleur op Material Design Colors.

Heeft u de site gepresenteerd? Heb je een prototype gemaakt? Heeft u uw kleuren gekozen? Nu kunt u doorgaan met het maken van de lay-out zelf. Ik bied je verschillende manieren aan.

Aandacht! Er zal hier geen advies zijn over het maken van een website-indeling in Photoshop - dit is een onderwerp voor een apart artikel, hier zijn eenvoudigere methoden.

Methode nummer 1. Een lay-out uit een websitesjabloon knippen

of bestaande locaties

Deze methode is geschikt voor u als u:

• zoek het uit basisgereedschap Photoshop;
• anders vinden referenties voor je toekomstige website en stel ze samen;
• gevoel ontwerper voor een paar uur;
• demonstreer het meest aan een webontwerper of bureau (bijvoorbeeld ons:). gedetailleerde visie van de site;
• versterken TK voor website-ontwikkeling zijn er niet alleen “hier zijn de belknoppen, en hier is de scheidingsteken en leadmagneet.”

De voordelen van deze aanpak voor lay-outontwikkeling:

• jij kunt vermijd veelvoorkomende fouten, nadat ik genoeg kwaliteitssites heb gezien;
• je zult het begrijpen wat je niet moet doen om het goed te maken;
• webontwerpartiesten zullen dat duidelijk doen stel je voor wat je verwacht;
• Dit heel snel- in een paar uur maak je lay-outs voor alle pagina's van de site.

Nadelen:

• je zult nooit volledig begrijpen wat webdesign is;
• Sommige van de gevonden verwijzingen kunnen niet door de lay-outontwerper worden geïmplementeerd zonder andere delen van de site te wijzigen.

Hoe het gedaan is

De eenvoudigste en snelle manier maak een website-indeling - kies sjabloon voor een specifiekCMS en maak het zelf opnieuw. Daarom moet u eerst beslissen over een CMS, wat de ontwikkeling van de site aanzienlijk zal vereenvoudigen. Houd er echter rekening mee dat het ontwerp van de site hetzelfde zal zijn beperkt zijn de elementen die in de sjabloon voorkomen. Natuurlijk kunt u de kleuren wijzigen, maar individuele interface-elementen zijn al kant-en-klaar en u kunt deze niet wijzigen.

Als je dat doet "stoofpot" van verschillende sites, vergeet niet met potlood ergens in je notitieboekje te schrijven bronnen. Dit zal de verdere ontwerpontwikkeling en lay-out van de lay-out vereenvoudigen.

Website-indelingen voor Wordpress

Het populairste CMS is Wordpress. Zo vind je voor dit CMS veel moderne templates. Waarvoor? Website op een sjabloon versnelt de lancering van het project aanzienlijk, maar het zal niet uniek zijn. Hoewel, als je originele illustraties, afbeeldingen en een creatieve aanpak gebruikt – zelfs een sjabloonlay-out kan onherkenbaar opnieuw worden gemaakt. Het grote voordeel is dat uw website gegarandeerd adaptief en over het algemeen mooi is weergeven op verschillende apparaten.

Weergave verschillende sjablonen en kies degene die je het leukst vindt. Ik heb nog wat verder gezocht op Envato Market en vond de Dalton-sjabloon die ik het leukst vond. Door naar demo-versie template ziet u meteen het concept van een bedrijfswebsite. Door op het menu te klikken kunt u meer zien in detail welke functies de sjabloon heeft hoe ze eruit zullen zien verschillende pagina's. Het is het beste om hier een half uur aan te besteden en echt te begrijpen wat er in de sjabloon staat.

Wat is het volgende? Grootte van de website-indeling selecteren, knippen en lijmen

Wanneer u al vertrouwd bent met de sjabloon, kunt u deze gaan bewerken. snijden. Geweldig als je schermresolutie 1920px of meer - hiermee kunt u eenvoudig schermafbeeldingen maken van delen van de site en deze combineren in de editor. Het werken met de lay-out begint met de koptekst, vervolgens - verschillende blokken (body) en aan het einde - de voettekst.

Je hebt nodig:

• comfortabel hulpmiddel om een ​​momentopname van een geselecteerd gebied te maken (schermopname tool), gebruik ik Lightshot - het suggereert dat je de afbeelding opslaat apart bestand of kopieert het naar het klembord;
• Photoshoppen- voor het lijmen van uitgesneden delen van afbeeldingen.

Fasen van het maken van een lay-out voor een website op basis van een sjabloon

Stap 1. Selecteer de breedte van de site-indeling

Bepaal welke pagina u als eerste gaat doen. Begin niet met de belangrijkste - het is beter om deze als laatste te bewaren, omdat... dit is de belangrijkste pagina van de site en het is beter om dit eerst te doen vul je hand. In het voorbeeld zal ik een 'Over ons'-pagina maken - hier zal het zijn interessante informatie over het bedrijf en zijn medewerkers. Dat heb ik al gedaan website-prototype, dus ik weet wat ik doe. Hoe gaat het trouwens met je prototype?

Open Photoshop en stel de breedte van de site-indeling in 1920px. Dit zal genoeg zijn om te zien hoe de site er in de browser uit zal zien. Als uw resolutie lager is, stelt u deze in op de breedte die uw monitor toestaat. Maak je nog geen zorgen over de hoogte; deze is moeilijk te raden en je zult het gebied nog steeds moeten uitrekken/inkrimpen.

Stap 2. We gaan verder met het maken van een website-indeling in Photoshop

Selecteer er een uit de sjabloon hoed, wat je leuk vindt. Knip uit met haar hulp handig hulpmiddel, open het document in Photoshop en invoegen daar (Ctrl+V). Gebruik het gereedschap Verplaatsen (V) om de koptekst bovenaan te plaatsen. Ik hou van de koptekst met de bovenste balk waar die er is contactgegevens over het bedrijf.

Stap 2.A. Maak meteen de juiste website-indeling

Nu heb je twee manieren: verander de tekst in de afbeelding of schrijf begeleidende tekst V tekstbestand. Wat is handiger? Het hangt allemaal af van uw doelen. Op persoonlijke ervaring Ik kan zeggen dat het beter is om dit meteen in de lay-out te doen het kiezen van het lettertype en de grootte. Dit zal veiliger zijn en zal WYSIWYG in actie zijn (Wat je ziet is wat je krijgt, “wat je ziet is wat je krijgt”).

Stap 3. Laten we naar succes gaan

Vullen de mijne indeling verschillende blokken en bewerking ze volgens uw behoeften. Op in dit stadium je hoeft niet met kleuren te spelen als je niet over de vaardigheden beschikt met behulp van Photoshop. Gebruik het hulpmiddel om de hoogte van de lay-out te vergroten "Kader"(MET).

Wat is er gebeurd

Na een paar minuten nadenken, knippen en lijmen van de stukken die ik het leukst vond, snapte ik het gestructureerde pagina-indeling"Over ons"

Wat je niet mag vergeten

1. Telefoongesprek elk laag met blok adequaat, afhankelijk van wat er is. Anders zul je volledig verloren zijn.
2. Bij het kiezen van een lettertype moet u kiezen verschillende maat Voor kopteksten en body tekst. In dit geval is het beter om u te laten leiden door de weblettertypebibliotheek van Google Fonts. Vergeet niet Cyrillische lettertypen uit te filteren.

Methode nr. 2. Een website-indeling maken in Photoshop is bijna zo

Methode nummer 2 is geschikt voor u als:

• je hebt NeePhotoshoppen(het geweten staat het niet toe of er is geen schijfruimte) of je hebt nog niet geleerd hoe je het moet gebruiken;
• Jij wilt leren kennenHTML-code enCSS-stijlen zonder interferentie met markeringen;
• je hebt een interactieve website-indeling nodig.

Ik raad aan dat het prachtig is gratis hulpmiddel voor het maken van Macaw-lay-outs. Om met het programma te kunnen werken, heb je het nodig downloaden en installeren- het is een kwestie van een paar minuten. In het programma kan dat visuele modus maak de lay-out praktisch op, omdat u deze onmiddellijk kunt publiceren en de HTML-code en CSS kunt zien. Iets meer details over hoe het programma werkt. Ara heeft aanzienlijk nadeel- zij creëert niet-reagerende webpagina. Hoe hiermee om te gaan? Hier zijn vaardigheden nodig lay-out ontwerper om het raamwerk te verbinden (bijvoorbeeld als u een site-indeling voor Bootstrap maakt). Maar als je het gewoon wilt laten zien werkende indeling voor collega's - Macaw is perfect.

Het ziet er niet zo uit responsieve sjabloon op verschillende apparaten. Ik wil huilen

Start het programma op uw computer om aan de slag te gaan. Wij presenteren onder uw aandacht leeg document met een paginabreedte van 1200 px met een rastersite-indeling. Standaard zijn er tussenkolommen inkeping(opvulling), zodat er ruimte ontstaat tussen de gemaakte elementen. Het enige wat je hoeft te doen is tekenen binnen kolommen, want als je er voorbij gaat, verschijnen de blokken onder elkaar. Houd ze dus in de gaten.

U kunt onafhankelijk de breedte van de kolommen, hun aantal en de afstand ertussen instellen. Als je dat wilt elementen kleven aan elkaar, stel de kolombreedte in op 100% en verwijder de opvulling ertussen. Waarom heb je dit gaas nodig? Met HTML-indeling van de site-indeling zal er zijn Het is eenvoudiger om een ​​responsieve sjabloon te maken, omdat moderne raamwerken gebruiken een raster met 12 kolommen.

Je kunt de breedte van het werkgebied wijzigen door het naar rechts te slepen, of door zelf de grootte in te stellen

Wat is het volgende? Indeling

Instellen werkgebied op een manier die voor jou handig is en laten we aan de slag gaan. Ik ga dezelfde pagina maken die ik uit het Dalton-sjabloon heb geknipt.

Stap 1.

Eerst moet je creëren hoed. Het zal zo zijn houder met een hoogte van 100 px en ondergrens, 1 px dik.

Binnenin een ander houder er zal een logo zijn, en in de volgende zal er een menu zijn. Voor individuele elementen het is niet nodig om een ​​menu te maken aparte blokken, is het voldoende om een ​​aanvaardbare afstand tussen de woorden in te stellen (woordafstand).

Stap 2

MET kant-en-klare hoed je kunt doorgaan naar de resterende blokken. In het volgende blok zal ik het hebben achtergrond wat nodig is afzonderlijk downloaden.

Stap 3. Creëer een interactieve website-indeling

Ik blijf blokken slepen en er tekst invoegen. Ik maak een knop met behulp van speciaal gereedschap « Knop"(logica!). Met Macaw kunt u een interactieve lay-out maken verschillende omstandigheden knoppen en de mogelijkheid om tussen pagina's te schakelen.

Let op de volgende gemarkeerde items. Ze helpen je om tussen verschillende blokken te schakelen en deze te ordenen. Bijvoorbeeld, de tekst moet in een specifieke container staan, en niet alleen maar rondhangen.

Als u op drukt Bestand ->Publiceren ontvangt u een kant-en-klare pagina waar u de HTML-code en CSS in kunt bekijken verschillende tabbladen. Dit is erg handig als je wilt zien hoe de opmaak eruit ziet.

Wat is er gebeurd

Het bleek ongeveer zo te zijn. Hier ter vergelijking, links gelijmde stukken van het bewerkte sjabloon, rechts- lay-out gemaakt in Macaw. Een groot pluspunt van het programma is dat je knoppen kunt invoegen, er links naar kunt toevoegen, verschillende pagina's kunt maken en ertussen kunt navigeren. Vergeet het gewoon niet containerhiërarchie en verdwaal er niet in.

Kenmerken van deze methode voor het maken van een website-indeling:

• begrijpen subtiliteiten van het werk programma’s moeten worden besteed extra tijd;
• zelfs als je je al in het programma hebt verdiept, is het soms nog steeds niet duidelijk waarom het zich zo gedraagt ​​en niet anders;
• je kunt het aanpassingsvermogen vergeten als je het niet zelf afmaakt;
• Echt handig om een ​​lay-out te maken en begrijp zelfs de lay-out een beetje - je kunt zien hoe de elementen op elkaar inwerken en wat de structuur in het algemeen is;
• dingen als “width: 16.6666666666%” kunnen verschijnen in stijlen, die zal gerepareerd moeten worden; je moet gewoon begrijpen dat dit WYSIWG is, en niets meer.

Methode nummer 3. Online mockuptool

Als u op zoek bent naar een optie voor het maken van indeling van de site in de applicatie met zo eenvoudig en intuïtieve interface , Ik heb deze methode speciaal voor jou opgesteld.

Handig hulpmiddel voor het maken infographics, die ik al heel lang gebruik - de Creately-service. Er zijn tientallen en honderden componenten om te maken UI-ontwerp voor verschillende apparaten (meer voor mobiele apparaten). Je zult het zeker leuk vinden, ik zal je er een paar laten zien.

Nog steeds hier handig om elementen te bewerken, voeg tekst toe (en maak zelfs knoppen met links!). Over het algemeen kreeg ik binnen een paar minuten al hetzelfde als in Macaw, alleen voorzichtiger. Een dergelijke lay-out kan echter niet zeer interactief worden gemaakt. Er zijn geen stappen voor deze methode omdat... De service is goed intuïtief. Op het scherm probeerde ik zoveel mogelijk weer te geven servicemogelijkheden.

Kenmerken van de Creately-service

Dat is alles. Dit waren de methoden waar ik in een of ander stadium van creatieve ontwikkeling op uitkwam. Als u dit materiaal nuttig vindt, zijn wij blij.

P.S. Dit artikel is uitsluitend voor informatieve doeleinden en staat u niet toe een webontwerper te worden. Om serieuze kennis te verkrijgen, zul je veel meer op internet moeten zoeken.

In deze zelfstudie leren we hoe u een bloglay-out in minimalistische stijl kunt maken met behulp van nieuwe Photoshop-technologieën. Nieuwe opties voor het maken en opslaan van stijlen zullen ons hierbij helpen. Tekenstijlen en alineastijlen.

Laten we eens kijken wat we in deze tutorial gaan maken.

Om deze les te voltooien, hebt u de volgende hulpmiddelen nodig:

• Gratis lettertype Gratis lettertype Sansation.
• Textuur 26 Herhaalbaar pixelpatroon
• Sociale iconen set Gratis sociale media iconen
• Handcursorpictogram
• Stockfoto: Oogst · 1
• Stockfoto: New York · straten · 3
• Stockfoto: Daisy Age
• Stockfoto: Stockfoto: Boom · horizon
• Stockfoto: Verkoopcijfers
• Stockfoto: Tijd · geld · tijd · geld · tijd · geld / Time is Money!

Het doek voorbereiden

Stap 1

In deze tutorial gebruiken we het raamwerk 960GS . Nodig bij download de sjabloon van de hoofdpagina en zoek het bestand in het archief"12 Kolommenraster".

Klik op het oogpictogram naast de 12 Col Grid-laag om de zichtbaarheid ervan te verbergen - totdat we deze nodig hebben.

Stap 2

Voorlopig is het formaat van ons canvas vrij klein. Klik Afbeelding>Doekgrootte(of Ctrl + Alt + C) om het formaat iets groter te maken en het ankerpunt in het midden te plaatsen.

Stap 3

Klik Ctrl + Rom de liniaal te laten zien. KlikBekijk> Nieuw Gids (Bekijken - Nieuwe gids) om een ​​nieuwe gids te maken.Selecteer Verticaal en Positie: 185px om een ​​verticale hulplijn te maken die 185 px vanaf de linkerrand wordt verschoven.

Stap 4

Creëer meer verticale hulplijnen op een afstand van150 , 1095 En 1130 pixels .

Kleurthema voorbereiden

Stap 5

In ons ontwerp gaan we het volgende gebruiken kleurencombinatie- Kleurenlouver . Klik op de afbeelding om de kleurencombinatie te openen en op te slaan als JPEG.

Plaats het kleurenschema in het Photoshop-bestand.Door afbeeldingen rechtstreeks in onze sjabloon te plaatsen, wordt de toegang veel sneller en gemakkelijker.

De achtergrond voorbereiden

Stap 6

Selecteer Achtergrondlaag en klik op het slotpictogram om deze laag te ontgrendelen. Dubbelklik op de afbeelding om de achtergrondkleur te wijzigen.

Selecteer met behulp van het pipet de tweede kleur van ons kleurenschema (# 948371) .

Stap 7

Teken een rechthoekige vorm bovenaan het canvas.Dit zal de tweede achtergrond zijn.

Stap 8

Selecteer het gemaakte formulier en ga naar de optiebalk. open Vullen Kleur en klik op het kleurkiezerpictogram. Wanneer het dialoogvenster Kleurkiezer verschijnt, selecteert u de eerste kleur. In het veld Hartinfarct selecteren Geen

Stap 9

Maak een nieuwe laag en gebruik het gereedschap Rechthoekig selectiekader om de bovenste rechthoek te selecteren. Activeer het verloopvulgereedschap en vul het geselecteerde gebied radiale gradiënt van wit naar zwart.

Verander het modus Mengen modus op Scherm en verminder de dekking Dekking naar 37% .

Stap 10

Maak een nieuwe laag en noem deze "schaduw".

Teken een rechthoekige selectie onderaan de tweede achtergrond, zoals weergegeven in de onderstaande afbeelding. Klik Edit: vullen . Installeren Gebruik - Zwart . Klik OKom de selectie met zwart te vullen.

Stap 11

Vervaag het met Gaussiaans vervagen. KlikFilter> Vervagen> Gaussiaans vervagen .

Stap 12

Houd Alt ingedrukt, plaats de cursor ertussen schaduw En laag met een tweede achtergrond. Terwijl u Al ingedrukt houdt, klikt u om de laag naar een uitknipmasker te converteren. Door het om te zetten in een uitknipmasker, worden de schaduwen nu in de bovenste achtergrond geplaatst.

Stap 13

Verander de transparantie van de schaduwDekking naar 50% . Hieronder ziet u het resultaat bij een vergroting van 100%.

Stap 14

Het is tijd om alle lagen in één groep te plaatsen. Om dit te doen, selecteert u alle lagen en drukt u op Ctrl + G.

Koptekst

Stap 15

Teken een rechthoek bovenaan het canvas, zoals weergegeven in de afbeelding.

Stap 16

In het paneel Optiebalk, kleur instellen Hartinfarct- #af9f8e .

Stap 17

Voor het vullen selecteer de volgende kleuren lineaire gradiënt- van#d0c4b9 Naar #a89c91.

Sitenaam

Stap 18

Aan de linkerkant van de sjabloon voegen we de naam van onze site toe. Let op: de plaatsing komt overeen met onderstaande afbeelding. Dubbelklik op de tekst en voeg toeSlagschaduw. Het lettertype dat in de les wordt gebruikt Sansatie.

Menu

Stap 19

Met behulp van het Sansation 14 pt-lettertype maken we het menu. Nogmaals, let op de plaatsing.

Stap 20

Voor de actieve menuknop stelt u het lettertype in op vet.

Stap 21

Activeer het gereedschap Veelhoek en stel het aantal zijden in op 3 . Teken een driehoek met vulkleurVul: #3d3123en slagwaardeHartinfarct: Geen. Voeg een schaduw toe aan de laag -Laagstijl> Slagschaduw .

Stap 22

Wij benadrukken actieve knop menu. Activeren Lijn gereedschap en stel het gewicht van de maat in -5 pixels. Selecteer kleur#f76b6a en de lijn zou zonder slag moeten zijn.

Zet een streep eronder actief menu en voeg 1 pixelafstand toe tussen de lijn en de rechthoekige vorm.

Tekenstijlen gebruiken

Stap 23

Laten we de stijlinstellingen voor de tekst opslaan. Dit is zoiets als een vereenvoudigde versie van de tekenstijlen in InDesign. Om ze op te slaan, moet u de tekst activeren en vervolgens op het pictogram "Nieuwe tekenstijl" klikken.

Dubbelklik op de nieuwe stijl en kies de volgende instellingen.

Stap 24

Selecteer het volgende menu-item en klik vervolgens op de knop Tekenstijl om de stijlinstellingen toe te passen.Als u naast de stijlen een plusteken vindt, betekent dit dat ze verschillende instellingen hebben.

Stap 25

Herhaal de vorige stap om de gemaakte stijl op het actieve menu toe te passen.

Stap 26

Wat is het voordeel van het gebruik van tekenstijlen? Ze zullen ons helpen de tekstinstellingen te centraliseren. We kunnen eenvoudig de tekenstijl wijzigen om elke tekst te bewerken. Bijvoorbeeld als u de stijl verandert Topmenu – Normaal op console, alle menu-items veranderen automatisch in Corbel.

Stap 27

Maak een nieuwe laag en plaats deze onder de menu-items. KlikCtrl en klik opmenu om de volgende selectie te maken. Vul het op zwart.

Stap 28

Verwijder de selectie door te klikkenCtrl + D.Vervaag het zwarte gebied door een filter toe te passenFilter> Vervagen> Gaussiaans vervagen .

Schuifregelaar

Stap 29

Teken een kolombrede rechthoekige vorm (zie hieronder).

Selecteer voor vulkleur #dfd1c2. Kleur Hartinfarct #c8baac, maat 10 pt. Klik op het kleine pijltje naast de regel om er zeker van te zijn dat de optie is geselecteerd Binnen uitlijnen.

Stap 30

Voeg de afbeelding in zoals weergegeven in de onderstaande afbeelding. Converteer het naar Knipmasker door te klikken Ctrl + Alt + G . De afbeelding wordt automatisch in het schuifblok geplaatst. Indien nodig kunt u het formaat wijzigen en verplaatsen zonder dat het frame op enigerlei wijze wordt beïnvloed.

Stap 31

Teken nog een rechthoekige vorm nabij de schuifregelaar met dezelfde kleur.Zorg ervoor dat de vorm vastklikt op de buitenste geleider. Stijlen toevoegenLaagstijl> Patroonoverlay, gebruik van textuur

Photoshop is een enorm populair programma onder webdesigners, voor velen zelfs een standaard. En als het om de lay-out van de website gaat, betekent dit in de meeste gevallen een .PSD-bestand.

Voordat u direct de lay-out maakt, moet u beslissen over de structuur van de site, nadenken over de navigatie en u voorstellen waar welke blokken en elementen zich zullen bevinden.

Waaruit bestaat de indeling?

De overgrote meerderheid van webpagina's bestaat uit:

• Het bovenste gedeelte (header), waarin het logo, de slogan, navigatiemenu enz.;
• het hoofdblok waarin de inhoud wordt geplaatst;
• zijbalk (zijbalk);
• het onderste gedeelte (voettekst), waarin meestal ondersteunende informatie, copyrightinformatie, nuttige links enz.

Hoe creëren?

Bedenk en denk na over de structuur. Het zou geen kwaad om het op een stuk papier of in Photoshop zelf te tekenen.

Let op kleurenschema- tonen moeten worden gecombineerd en overeenkomen met het thema en de richting van de site. De tekst moet gemakkelijk te lezen zijn en de pagina's moeten snel worden geladen. Ga niet overboord met decoraties, interactieve elementen en mooie lettertypen - gemak is belangrijker dan een opvallend ontwerp, omdat gebruikers sites niet bezoeken om ernaar te staren, maar met een vooraf bepaald doel, en hoe sneller uw hulpbron het kan oplossen, hoe meer het wordt gewaardeerd.

Bepaal of uw ontwerp rekbaar of vast is. Steekproef vaste maat Het ziet er op alle schermen hetzelfde uit, maar het "rubberen" scherm, dat van formaat verandert, past zich aan het apparaat aan. Als het ontwerp "rubber" is, moet u beslissen wat de achtergrond van de site zal vullen.

We hebben echter de lay-out van deze webbron gemaakt in, die deel uitmaakt van (ik raad het ten zeerste aan), en complex voorbeeld je kunt erin vinden.

Om me niet te laten afleiden door de details en het gebruik van reeds bestudeerde tools, zal ik hier een voorwaardelijk voorbeeld van een lay-out, een sjabloondiagram, overwegen, maar met behulp van het beschreven algoritme kun je eenvoudig met je eigen lay-out werken.

1. Maak een document voor de toekomstige lay-out. Vergeet niet de maat aan te passen.
2. Baken de lay-out af met behulp van hulplijnen die zijn getekend op de linialen.

Om linialen in te schakelen, drukt u op de toetsencombinatie Ctrl+R, of voert u de opdracht Beeld -> Linialen uit in het hoofdmenu van het programma.

Om een ​​horizontale hulplijn uit te slepen, klikt u met de muisknop op de bovenste liniaal en beweegt u, zonder deze los te laten, de aanwijzer naar beneden totdat de hulplijn gewenste positie. Om eruit te trekken verticale lijn, doe hetzelfde, verplaats gewoon de aanwijzer naar de rechterkant van de liniaal aan de linkerkant.

Als gevolg hiervan moet uw sjabloon worden afgebakend.

1. Teken de lay-out. Voeg afbeeldingen, lijnen, knoppen en andere elementen toe. Alles is hier individueel en we hebben overal naar de hulpmiddelen voor werk gekeken.

1. Voeg wat kleur toe als je dat nog niet hebt gedaan. Denk aan de harmonie en zachtheid van tonen. Kennis van mens-machine-interactie en kunstacademie zijn alleen maar een pluspunt.

Hoe te snijden

Al afgewerkte indeling het is noodzakelijk om het “in stukken” te knippen om de elementen ervan in het siteontwerp te kunnen gebruiken, waarvan een deel zal worden geïmplementeerd via HTML, een deel via CSS, en een deel via de afbeeldingen waarin de lay-out zal worden geknipt. Onthoud dit als u meerdere afbeeldingen met een witte achtergrond, paginatekst of linknamen wilt achterlaten - u hoeft alleen achter te laten wat uit grafische bestanden wordt gehaald en niet op een andere manier wordt geïmplementeerd.

De lay-out is dus klaar en open. We snijden het.

1. Schakel lagen uit met onnodige elementen lay-out - tekst, knoppen, formulieren, etc. Om een ​​laag te verbergen, klikt u op het oog in de lijn ervan.

1. Pas de hulplijnen aan die vanaf de linialen zijn getekend structurele elementen plaats. In principe kan de lay-out erlangs worden gesneden, maar in dit geval zal het misschien niet precies zo zijn als nodig, dus zullen we een ander hulpmiddel gebruiken.
2. Selecteer de Nesting-tool. Het bevindt zich op het palet in de groep Frame.

1. Om een ​​deel van uw ontwerp af te snijden, verplaatst u de aanwijzer naar de plek waar u wilt beginnen en handelt u alsof u een rechthoekig gebied selecteert. Het uitgesneden gedeelte wordt genummerd. Blauw getallen betekent dat het fragment actief is en kan worden bewerkt. De onderdelen waarvan het programma verwacht dat u ze knipt, zijn genummerd grijze achtergrond. Het uitgesneden fragment is gemarkeerd en voorzien van markeringen, waardoor de grootte en positie ervan kunnen worden aangepast.

1. Maak de volgende snede op dezelfde manier, enzovoort totdat de taak is voltooid.
2. Als alles klaar is, slaat u het resultaat op. Om dit te doen, voert u de opdracht Bestand -> Exporteren -> Opslaan voor web ( oude versie), controleer de instellingen (selecteer formaat, kwaliteit, enz.), klik op Opslaan en specificeer de map waarin de catalogus met grafische bestanden zal worden aangemaakt.

1. Binnen de geselecteerde map verschijnt een map met afbeeldingen grafische bestanden, die elk een deel van de lay-out bevatten.
2. Nu kunt u knoppen, pictogrammen en andere voorheen verborgen elementen opslaan.

De lay-out is gemaakt, geknipt en helemaal klaar.