Ak chcete vytvoriť vlastnú webovú stránku, pochopte, ako vytvoriť stránku vo Photoshope. Adobe Photoshop je grafický editor. Je možné kresliť nákresy a ich jednotlivé prvky. Je to pomerne dlhý a komplikovaný proces. V priebehu rokov sa web dizajnéri učili, ako navrhovať šablóny a vytvárať na nich webové stránky. Ale jednoduché usporiadanie môže zbierať každú osobu. Potrebné sú len základné znalosti a fantázia Photoshopu.

Vo Photoshope nakresliť jednoduchý dizajn stránok aj nováčik môže

Od prvého okamihu je nepravdepodobné, že dostanete stránku ako dizajnéri. Ale môžete čerpať atraktívnu a nepríjemnú službu.

Len málo o vytváraní stránok

Dekódovanie niektorých výrazov.

• CSS (Cascading Style Sheets) a HTML (HyperText Markup Language) sú počítačové jazyky používané na vytváranie webových zdrojov. Ak otvoríte zdrojový kód akejkoľvek stránky na Internete, budú existovať značky HTML.
• Rozloženie - usporiadanie a inštalácia materiálov z rozloženia, zmena na html-šablónu. Záleží na tom, ako sú objekty usporiadané, č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 veľký obraz. Ale môžu byť editované a presúvané oddelene od seba.
• Telo je miestom, kde sa nachádza obsah. Okolo neho môže byť pozadie.
• Rám (Frame) - element stránky. Blok s informáciami, obrázkami, formulármi.

Make ohromujúci stránky od nuly môže byť len profesionálny. Ak to chcete urobiť, musíte pochopiť web design a poznať HTML. Vzhľadom k tomu, hotové layout musí ešte kompetentne uložiť.

Ale existuje viac jednoduchých spôsobov. Existujú online služby a programy, ktoré automaticky konvertujú .psd (formát súborov Photoshopu) na HTML a CSS. Stačí len správne zostaviť šablónu.

Ak chcete používať Photoshop nie je nutné byť umelcom a rozumieť všetkým možnostiam programu. Ale ak ste ho prvýkrát spustili a neviete ako vložiť text, nakresliť geometrický tvar, duplikovať vrstvu, zmeniť farbu alebo vybrať ľubovoľnú oblasť, mali by ste začať s niečím jednoduchším. Ak chcete vytvoriť rozloženie vo Photoshope, potrebujeme aspoň počiatočné zručnosti v práci s pomôckou a pochopenie základných funkcií (ako kresliť čiaru, vložiť sprievodcu, vybrať písmo a podobne).

Užitočné sú aj všeobecné informácie o sieťových službách. Stránky môžu byť charakterizované nasledujúcimi kritériami:

• Jedna stránka. Všetky prvky, obsah, všetok obsah zdroja sú na jednom mieste. Na jednej stránke. Ak chcete zobraziť obsah služby, neklikajte na odkazy ani otvárajte nové karty. Súčasne môže byť lokalita ľubovoľne veľká. Bude sa hodiť malá reklamná brožúra a obrovský 600-stranový román.
• Plná. Preto obsahuje mnoho stránok. Môžu to byť napríklad „Domov“, „Fórum“, „Kniha návštev“, „Odpovede na často kladené otázky“, „Kontakty“. Pre každú z nich musíte urobiť rozloženie. Potrebujete tiež navigáciu a mapu lokality: samostatnú časť s odkazmi na všetky časti služby. Takže užívateľ môže rýchlo nájsť záložku, ktorú potrebuje.
• "Rubber". Zmení veľkosť v závislosti od rozlíšenia obrazovky. Natiahnuté spolu s oknom prehliadača. Musíme vopred vypočítať, ako bude stránka vyzerať. Ak je so šírkou 1300 všetko zobrazené normálne, potom v 900 pixeloch môže časť článku „ísť“ za hranice rámčeka, obrazy sa nebudú vzpínať tak, ako by mali, a flash animácia zatvorí vstupný formulár.
• Opravené. Telo stránky nemení veľkosť. Najjednoduchšia a najpraktickejšia možnosť. Ak chcete, aby stránka vyzerala pevne a pri rozšírení okna na okrajoch nebol žiadny „prázdny“ priestor, môžete vytvoriť gumové pozadie.

dispozície

Najprv sa rozhodnite, aký dizajn potrebujete. Nestačí jednoducho "predstaviť" a potom usporiadať vo Photoshope. Musí to byť jasný výhľ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é konvenčne označujú prvky webovej stránky. Premýšľajte o tom, ako budú umiestnené rámy, kde je lepšie umiestniť logo, kam umiestniť informácie pre návštevníkov.

Pozrite si príklady stránok na internete. Myslíte, ktoré sa vám páčia a prečo. Či sa jedná o pohodlné usporiadanie rámov, príjemné farby alebo zaujímavý prístup k dizajnu. Kopírovať niekoho iného dizajn nestojí za to. Stačí z toho čerpať inšpiráciu. Potom môžete zistiť, ako kresliť stránky vo Photoshope.

• Vytvorte nový dokument (Súbor - Nový). Rozmery sa vyberajú výpočtom na malých monitoroch alebo nízkom rozlíšení: 1024 × 720 pixelov. Toto je šírka "informačnej" časti, a nie celý obraz. 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 fixná - 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 Ctrl + R alebo prejdite do menu Zobraziť - Pravítka. Toto je meradlo. Objaví sa mimo obrázku. Bez neho budete musieť odhadnúť veľkosť a vzdialenosť "oko", čo veľmi dobre neovplyvňuje konečný výsledok. Túto funkciu môžete konfigurovať v menu Edit - Settings - Units of Measurement and Rulers. Je lepšie zmeniť centimetre na pixel, aby ste mohli pracovať s jedným parametrom, a nie spočítať, koľko bodov na jeden palec.
• Mali by ste tiež aktivovať mriežku. Zobraziť - Zobraziť - Mriežka alebo Ctrl + E (môžete ho tiež vypnúť). Toto je druh analógu notebooku v klietke. Vo Photoshope sa zobrazia zvislé a vodorovné čiary. Na výkrese sa nezobrazia. Môžu byť videné len pri editácii. Táto funkcia je potrebná na rovnomerné usporiadanie prvkov šablóny. Niekto pohodlnejší pracovať s mriežkou, niekto bez nej. Najlepšie je ho zapnúť, ak robíte stránku prvýkrát.
• Ak ho chcete konfigurovať, prejdite na Edit - Settings - Guides, Grid a Fragmenty. Tu si môžete vybrať veľkosť buniek, ako aj farbu a typ riadkov (pevné, bodkované, mimo bodiek).

Príklad moderného dizajnu stránok

• Nainštalujte vodiace lišty. Medzi nimi bude hlavný obsahový zdroj - pevné telo stránky. A za nimi - gumové pozadie. Kliknite na položku Zobraziť - Nový sprievodca. V poli "Orientácia" začiarknite políčko "Vertikálne". V poli "Pozícia" zadajte vzdialenosť, pri ktorej bude objekt od ľavého okraja. Zamerajte sa na mierku pravítka.
• Potrebné sú dva vodidlá - vpravo a vľavo od tela stránky. Vzdialenosť medzi nimi by mala byť maximálne 1003 pixelov pre obrazovky s rozlíšením 1024 × 720. Môžete zadať inú šírku. Veľké zdroje sú však nepohodlné prezerať si malé monitory.
• Prečo 1003, nie 1024? Ak stránka potrebuje posunúť nadol ("rolovanie") nadol, prehliadač bude mať vertikálny posúvač na rolovanie. Veľkosť tohto posúvača je približne 21 pixlov. Ak ho neberiete do úvahy, zobrazí sa vodorovný posúvač. Návštevník zdroja bude musieť presunúť stránku doľava a doprava, aby videl všetky informácie.
• Telo by malo byť v strede plátna.

Ide o prípravné fázy práce. Ako urobiť rozloženie vo Photoshope závisí na vašej fantázii a chuti. Ďalej budú len všeobecné odporúčania technického charakteru.

• Po prvé, vaše rozloženie potrebuje pozadie. Môže byť vytvorený nezávisle alebo stiahnutý zo siete. Existuje mnoho zdrojov s voľnými textúrami. Neumiestňujte obrázky na stránky, na ktoré sa vzťahujú autorské práva. Neberte si svetlé alebo kontrastné pozadie. Je lepšie nepoužívať textúry s veľkým množstvom drobných detailov. Budú rozptyľovať návštevníka z tela stránky.
• Ak jednoducho otvoríte kresbu vo Photoshope, bude na novej karte a nebude pridaný do rozloženia. Zvýraznite celé pozadie. Na tento účel použite klávesovú skratku Ctrl + A alebo nástroj výberu (nachádza sa v ľavej časti okna). Skopírujte ho a prilepte do šablóny.
• Aj táto možnosť je dostupná, ak kliknete na položku Upraviť - Prilepiť.

• V pravom dolnom rohu sa zobrazí nová vrstva. Kliknutím na ňu pravým tlačidlom myši zobrazíte možné akcie. V menu "Možnosti vrstvy" môžete zmeniť jeho názov. V "Nastavenia prekrytia" sú základné nastavenia obrazu. Môžete to urobiť žiara, reliéf, lesk, mŕtvica, gradient. Ak vyberiete možnosť, zmeny sa okamžite zobrazia vo Photoshope. K dispozícii je sada hotových štýlov. Takže zo štandardnej štruktúry sú vytvorené originálne dizajnové riešenia. A neťahajte nič navyše.
• Tlačidlo "Filtre" sa nachádza v paneli s ponukami. Nájdete tu množstvo imitácií (pastel, akvarel, ceruzky), styling, textúry, náčrty, zvýraznenia, rozostrenie.
• Môžete si vybrať obyčajné pozadie. Farba závisí od vašich osobných preferencií. Ale je lepšie, aby to čierne alebo jedovaté. Vhodná posteľná bielizeň a mäkké tóny alebo priesvitná studená (napríklad svetlošedá, bledomodrá).
• Po textúrach môžete zbierať samotnú lokalitu. 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 Photoshope je počet tvarov obmedzený. Ale možno ich nájsť na internete, stiahnuť a nainštalovať cez menu Edit - Set Management. V poli Typ zadajte, ktorá kolekcia objektov sa načítava.
• V rôznych verziách programu sa tieto čísla nazývajú rôznymi spôsobmi. Buď pomocou tlačidla vo forme malého čierneho trojuholníka (je vpravo), alebo pomocou ikony ozubeného kolesa, alebo pomocou položky „Tvar bodky“ (je to pod panelom s ponukami). Objekty môžu byť kombinované, zoskupené, skladať ich.
• Ak chcete vytvoriť textový rámček, kliknite na tlačidlo vo forme veľkého písmena "T". Potom vyberte miesto, kde sa majú znaky nachádzať, kliknite tam a zadajte, čo potrebujete.
• Každý prvok je lepšie položiť na samostatnú vrstvu. Takže bude pohodlnejšie pohybovať sa a upravovať bez toho, aby ste sa dotkli celej stránky. Ak chcete pridať tento objekt, prejdite na Vrstvy - Nové.

• Ak chcete premietnuť obrázok do prednastavenej oblasti, najprv ho vyberte a potom otvorte položku Upraviť - Prilepiť špeciálne. K dispozícii budú možnosti „Vložiť namiesto“ a „Vložiť von“.
• Časť jedného obrázka môžete preniesť do novej vrstvy. Ak to chcete urobiť, vyberte ho, kliknite naň pravým tlačidlom myši a vyberte možnosť „Vystrihnúť na novú vrstvu“.
• S tvarmi, titulkami a obrázkami 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.

Kvalitný zdroj môžete vytvoriť aj z jednoduchých geometrických objektov.

Existujú zdroje s voľným rozložením. Vložte ich do Photoshopu a upravte podľa potreby. Je to jednoduchšie a rýchlejšie ako kreslenie od nuly.

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

Vy ste prišli na to, ako vytvoriť stránky vo Photoshope, a navrhol svoje prvé rozloženie. Čo ďalej? Koniec koncov, to nemôže len nahrať na hosting.

To môže byť daný kodér, ktorý bude robiť vysoko kvalitné html-šablóny. Ale je tu iná možnosť. Použite služby previesť PSD súbor do HTML a CSS.

• Psd2Html Converter. Platená online služba. Rýchlo previesť Photoshop formát na webovú stránku šablóny. S týmto zdrojom, a to aj z nekvalitného rozloženia, môžete vytvoriť slušné stránky.
• HTML Panda.
• PSDCenter
• 40 Dolár Markup.

konštruktéri

Rozvrhy je možné zbierať aj na špeciálnych stránkach. Zvyčajne existuje jasné a intuitívne rozhranie. Jednoducho zostavíte šablónu z rôznych častí. Niektoré prvky sú najlepšie nakreslené vo Photoshope. Takže dostanete originálny dizajn. Napriek tomu, že bol vytvorený na konštruktérovi.

Vo Photoshope nielen kresliť. Zbiera rozloženie stránok. Vo väčšine prípadov to robia majstri. Ale jednoduchá šablóna môže vytvoriť akúkoľvek osobu. Potrebné sú len základné znalosti Photoshopu.