Ako nakresliť web vo Photoshope

Ak chcete vytvoriť svoju vlastnú webovú stránku, pochopte, ako vytvoriť web vo Photoshope. Adobe Photoshop je grafický editor. V ňom môžete nakresliť rozloženia a jednotlivé prvky. Je to dosť dlhý a zložitý proces. V priebehu rokov sa web dizajnéri učia vytvárať šablóny a vytvárajú na nich webové stránky. Ale jednoduché usporiadanie môže byť zhromaždené ktokoľvek. Len základné znalosti a fantázia Photoshopu sú potrebné.

Vo Photoshope kresliť jednoduchý dizajn webových stránok aj začiatočník môže

Od prvýkrát je nepravdepodobné, že by ste získali stránku, akou sú dizajnéri. Môžete však čerpať atraktívnu a nepríjemnú službu.

obsah

1 Málo o vytváraní stránok
2 dispozície
3 Ako zmeniť rozloženie do html súboru?
4 konštruktéri

Málo o vytváraní stránok

Dekódovanie niektorých výrazov.

CSS (kaskádové štýly) a HTML (HyperText Markup Language) sú počítačové jazyky používané na vytváranie webových zdrojov. Ak otvoríte zdrojový kód ľubovoľnej stránky na internete, budú existovať značky HTML.
Rozloženie - rozloženie a inštalácia materiálov z rozloženia, premenenie na html šablónu. Záleží na spôsobe usporiadania objektov, na tom, či vyzerajú krásne v celkovom zložení, či je vhodné čítať text a podobne.
Vrstvy sú súčasťou rozloženia. Spoločne tvoria celý obraz.Ale môžu byť editované a presunuté oddelene od seba.
Telo je miesto, kde sa nachádza obsah. Môže to byť okolo nej.
Rám (rámček) - prvok stránky. Blok s niektorými informáciami, obrázkami, formulármi.

Urobte úžasné miesto od začiatku môže byť len profesionálny. Aby ste to urobili, musíte pochopiť dizajn webu a poznať HTML. Keďže dokončené usporiadanie musí byť kompetentne zložené.

Existuje však viac jednoduchých spôsobov. Existujú online služby a programy, ktoré automaticky konvertujú .psd (formát súboru Photoshop) na HTML a CSS. Budete musieť správne zostaviť šablónu.

Ak chcete používať Photoshop, nie je potrebné byť umelcom a pochopiť všetky možnosti programu. Ale ak ste ho prvýkrát začali a neviete, ako vložiť text, nakresliť geometrický tvar, duplikovať vrstvu, zmeniť farbu alebo vybrať ľubovoľnú oblasť, mali by ste začať niečím jednoduchším. Ak chcete vytvoriť rozloženie vo Photoshope, potrebujete aspoň počiatočné zručnosti pri práci s nástrojom a pochopenie základných funkcií (ako nakresliť riadok, dať sprievodcu, vybrať písmo a podobne).

Sú tiež užitočné všeobecné informácie o sieťových službách. Miesto možno charakterizovať nasledujúcimi kritériami:

Jedna stránka.Všetky prvky, obsah, celý obsah zdroja je na jednom mieste. Na jednej stránke. Ak chcete zobraziť obsah služby, nekliknite na odkazy alebo neotvárajte nové karty. Súčasne môže byť stránka sama o sebe ľubovoľne veľká. To sa hodí ako na malú reklamnú brožúru, tak aj na obrovský 600-stranový román.
Plná. Preto obsahuje mnoho stránok. Môže ísť napríklad o "Domov", "Fórum", "Kniha návštev", "Odpovede na často kladené otázky", "Kontakty". Pre každý z nich potrebujete rozloženie. Budete tiež potrebovať navigáciu a mapu stránok: samostatnú sekciu s odkazmi na všetky časti služby. Aby používateľ mohol rýchlo nájsť záložku, ktorú potrebuje.
"Rubber". Zmena veľkosti závisí od rozlíšenia obrazovky. Roztiahnuté spolu s oknom prehliadača. Musíme vopred vypočítať, ako bude stránka vyzerať. Ak sa so šírkou 1300 všetko zobrazuje normálne, potom v častiach článku s rozlíšením 900 pixlov môže časť výrobku "ísť" za rámček, obrázky sa nezobrazia tak, ako by mali, a flash animácia zatvorí formulár pre vstup.
Opravené. Telo stránky nemení veľkosť. Najjednoduchšia a praktická možnosť. Ak chcete, aby stránka vyzerala pevne a pri rozširovaní okna nebolo "prázdne" miesto pozdĺž okrajov, môžete vytvoriť gumové pozadie.

dispozície

Najprv sa rozhodnite, aký dizajn potrebujete.Nestačí jednoducho "predstaviť", a potom zaistiť vo Photoshope. Musí to byť jasný pohľad. Nakreslite vzor na obyčajný papier. Nie je potrebné prekresľovať každý obrázok. Dosť schéma: niekoľko obdĺžnikov a kruhov, ktoré zvyčajne označujú prvky webovej stránky. Premýšľajte o tom, ako budú umiestnené rámčeky, kde je lepšie umiestniť logo a kde umiestniť informácie pre návštevníkov.

Pozrite si príklady stránok na internete. Premýšľajte o tom, ktoré z nich sa vám páčia a prečo. Pohodlné, či ide o umiestnenie rámov, pekných farieb alebo zaujímavý prístup k dizajnu. Kopírovať niekoho iného dizajnu nestojí za to. Stačí stačiť inšpiráciu z nej. Potom môžete zistiť, ako nakresliť web vo Photoshope.

Vytvorte nový dokument (súbor - nový). Rozmery sa vyberajú pomocou výpočtu na malých monitoroch alebo s nízkym rozlíšením: 1024 × 720 pixelov. Toto je šírka časti "informácie", nie celý obrázok. Ak chcete stránku s veľkosťou 1100 pixelov, musíte vytvoriť dokument so šírkou 1300 pixelov. Dĺžka v skutočnosti nie je pevná - záleží na tom, koľko obsahu chcete umiestniť na zdroj. Toto sú odporúčania, nie pravidlá. Ak chcete, môžete vytvoriť veľké rozloženie.
Zapnite pravítko. Stlačte klávesy Ctrl + R alebo prejdite do ponuky Zobraziť - Pravítka. Toto je meracia stupnica. Zobrazuje sa mimo obrázok. Bez nej, musíte zistiť veľkosť a vzdialenosť "oko", čo nemá veľmi dobrý vplyv na konečný výsledok. Túto funkciu môžete nakonfigurovať v ponuke Upraviť - Nastavenia - Jednotky merania a Pravítka. Tam je lepšie zmeniť centimetre na pixel, aby sme mohli pracovať s jedným parametrom a nepočítať koľko bodov na jeden palec.
Tiež by ste mali aktivovať mriežku. Zobraziť - Zobraziť - mriežka alebo Ctrl + E (môžete ju tiež vypnúť). Toto je akýsi analóg notebooku v klietke. Vo Photoshope sa zobrazia vertikálne a horizontálne čiary. Na výkrese sa nezobrazia. Môžu byť viditeľné iba pri editácii. Táto funkcia je potrebná na rovnomerné usporiadanie prvkov šablóny. Niekto pohodlnejšie pracovať s mriežkou, niekto bez neho. Najlepšie je zapnúť, ak robíte miesto prvýkrát.
Ak ho chcete nakonfigurovať, prejdite na položku Upraviť - Nastavenia - Sprievodca, Mriežka a Zlomky. Tu si môžete vybrať veľkosť buniek, rovnako ako farbu a typ riadkov (pevný, bodkovaný, mimo bodky).

Príklad moderného dizajnu webových stránok

Nainštalujte vodiace lišty.Medzi nimi bude hlavným zdrojom obsahu - pevným telesom lokality. A za nimi - gumové pozadie. Ak to chcete urobiť, kliknite na položku Zobraziť - nová príručka. V poli "Orientácia" začiarknite políčko "Vertikálne". Do poľa "Poloha" napíšte vzdialenosť medzi objektom a ľavým okrajom. Zamerať sa na mierku pravítka.
Potrebujeme dva návody - vpravo a vľavo od trupu stránky. Vzdialenosť medzi nimi by mala byť maximálne 1003 pixelov pre displeje s rozlíšením 1024 × 720. Môžete určiť inú šírku. Ale veľké zdroje sú nepríjemné na zobrazenie na malých monitoroch.
Prečo 1003, nie 1024? Ak sa web musí posúvať nadol ("posúvať") nadol, prehliadač bude mať posuvník na zvislé šípky. Veľkosť tohto posúvača je približne 21 pixelov. Ak to neberiete do úvahy, objaví sa horizontálne posúvanie. A návštevník prostriedkov bude musieť presunúť stránku doľava a doprava, aby zobrazil všetky informácie.
Telo by malo byť v strede plátna.

Ide o prípravné štádiá práce. Ako vytvoriť rozloženie vo Photoshope závisí od vašej fantázie a chuti. Z toho dôvodu budú len všeobecné odporúčania technického charakteru.

Po prvé, rozloženie potrebuje pozadie.Môže sa vykonávať nezávisle alebo sťahovať zo siete. Existuje veľa zdrojov s voľnými textúrami. Neukladajte na stránky obrázky, ktoré sú predmetom autorských práv. Nepoužívajte jasné alebo kontrastné pozadie. Je lepšie nepoužívať textúry s veľkým počtom malých ohľaduplných detailov. Budú odvrátiť návštevníka od tela stránky.
Ak jednoducho otvoríte kresbu vo Photoshope, bude na novej karte a nebude pridaná k rozloženiu. Zvýraznite celé pozadie. K tomu potrebujete klávesovú skratku Ctrl + A alebo nástroj na výber (nachádza sa na ľavom paneli). Skopírujte ho a vložte ho do šablóny.
Táto možnosť je k dispozícii aj v prípade, že kliknete na položku Upraviť - Vložiť.

V zozname v pravej dolnej časti sa zobrazí nová vrstva. Kliknutím na ňu pravým tlačidlom myši zobrazíte možné akcie. V ponuke "Možnosti vrstvy" môžete zmeniť jeho názov. V "Nastavenia prekrytia" sú základné nastavenia obrazu. Môžete to urobiť žiarou, reliéfom, leskom, mŕtvicou, gradientom. Ak vyberiete možnosť, zmeny sa okamžite zobrazia vo Photoshope. K dispozícii je súbor hotových štýlov. Takže zo štandardnej textúry sa vytvoria originálne riešenia. A nenechávajte nič zvláštne.
Tlačidlo "Filtre" je v paneli s ponukami. Nájdete tu rôzne imitácie (pastel, akvarel, ceruzky), styling, textúry, náčrty, zvýraznenia, rozmazanie.
Môžete si vybrať jednoduché pozadie. Farba závisí od vašich osobných preferencií. Ale je lepšie, aby to nebolo čierne alebo jedovaté. Vhodná posteľná bielizeň a mäkké farby alebo priehľadná studená (napr. Svetlošedá, svetlo modrá).
Po textúrach môžete zozbierať samotný web. Tu máte slobodu vytvárať.
Ak chcete pridať nejaký tvar (čiara, štvorec, ovál), kliknite na príslušné tlačidlo vpravo. Bude mať vzhľad a názov objektu, ktorý je aktuálne vybraný na kreslenie. Napríklad Ellipse Tool, Polygon Tool. Vo formáte Photoshop je počet tvarov obmedzený. Ale možno ich nájsť na internete, načítať a nainštalovať cez menu Edit - Set Management. Do poľa Typ zadajte, ktorú zbierku objektov načítavate.
V rôznych verziách programu sa tieto čísla nazývajú rôznymi spôsobmi. Buď tlačidlo v podobe malého čierneho trojuholníka (je to vpravo) alebo ikony v tvare prevodového stupňa alebo položky "Tvar bodky" (je pod lištou ponuky). Objekty je možné kombinovať, zoskupovať a vytvárať ich skladby.
Ak chcete vytvoriť textový rámček, kliknite na tlačidlo vo veľkom písmenom "T". Potom vyberte miesto, kde sa majú umiestniť symboly, kliknite tam a zadajte, čo potrebujete.
Každý prvok je lepšie umiestniť na samostatnú vrstvu. Takže bude pohodlnejšie sa presúvať a upravovať bez "dotyku" celého webu. Ak chcete tento objekt pridať, prejdite na položku Vrstvy - nové.

Ak chcete premietnuť obrázok do predvolenej oblasti, najprv ju vyberte a potom otvorte Edit - Paste Special. K dispozícii budú voľby "Prilepiť namiesto" a "Vložiť vonku".
Môžete preniesť časť jedného obrázka do novej vrstvy. Ak to chcete urobiť, vyberte ho, kliknite naň pravým tlačidlom a vyberte možnosť "Vystrihnúť na novú vrstvu".
Pomocou obrázkov, titulkov a obrázkov sú k dispozícii rovnaké možnosti ako na pozadí: efekty, filtre atď.
Vo Photoshope je stále veľa nástrojov na kreslenie: kefy, perá, ceruzky.

Môžete vytvoriť kvalitný zdroj aj z jednoduchých geometrických objektov.

Existujú zdroje s voľným rozložením. Vložte ich do programu Photoshop av prípade potreby ich upravte. Je to jednoduchšie a rýchlejšie ako kreslenie od začiatku.

Ako zmeniť rozloženie do html súboru?

Prišlo ste na to, ako vytvoriť web vo Photoshope a navrhnúť prvé rozloženie.Čo robiť ďalej? Koniec koncov, nemôže len nahrávať na hosting.

Môže sa dať kodérovi, ktorý vytvorí vysoko kvalitnú html šablónu. Ale je tu aj iná možnosť. Použite služby na konverziu súboru PSD na HTML a CSS.

Psd2Html Converter. Platená online služba. Rýchlo previesť formát Photoshopu na šablónu webovej stránky. Pomocou tohto zdroja môžete vytvoriť slušnú lokalitu dokonca aj z rozloženia v nekvalitnej kvalite.
HTML Panda.
PSDCenter
40 Dollar Markup.

konštruktéri

Rozloženia je možné zozbierať aj na špeciálnych stránkach. Obvykle je jasné a intuitívne rozhranie. Jednoducho zostavíte šablónu z rôznych častí. Niektoré prvky sú najlepšie kreslené vo Photoshope. Takže dostanete originálny dizajn. Napriek skutočnosti, že bola vytvorená pre konštruktéra.

Vo Photoshope nielen kresliť. Zhromažďuje rozloženia stránok. Vo väčšine prípadov to robia majstri. Ale jednoduchá šablóna môže urobiť ľubovoľnú osobu. Len základné znalosti o Photoshope sú potrebné.