Jei norite sukurti savo tinklalapį, supraskite, kaip sukurti svetainę „Photoshop“. „Adobe Photoshop“ yra grafinis redaktorius. Galima piešti išdėstymus ir jų atskirus elementus. Tai gana ilgas ir sudėtingas procesas. Per daugelį metų žiniatinklio dizaineriai mokosi, kaip kurti šablonus ir juos išdėstyti. Bet paprastas išdėstymas gali surinkti bet kurį asmenį. Reikalingos tik pagrindinės Photoshop žinios ir fantazija.

„Photoshop“ sukuria paprastą svetainės dizainą net ir pradedantiesiems

Nuo pirmojo tikimybės, kad nepavyks gauti puslapio, kaip dizaino meistrai. Bet jūs galite padaryti patrauklią ir nepatogią paslaugą.

Mažai apie svetainių kūrimą

Kai kurių terminų dekodavimas.

• CSS (Cascading Style Sheets) ir HTML (HyperText Markup Language) yra kompiuterio kalbos, naudojamos kuriant žiniatinklio išteklius. Jei atidarysite bet kurio tinklalapio kodą, bus HTML žymės.
• Išdėstymas - medžiagų išdėstymas ir išdėstymas iš maketo, paverčiant jį html šablonu. Tai priklauso nuo to, kaip įrengiami objektai, ar jie atrodo gražiai bendroje kompozicijoje, ar tai patogu skaityti tekstą ir pan.
• Sluoksniai yra išdėstymo dalis. Kartu jie sudaro didelį vaizdą. Tačiau jie gali būti redaguojami ir perkeliami atskirai vienas nuo kito.
• Kūnas yra vieta, kurioje yra turinys. Jame gali būti fonas.
• Rėmelis (rėmelis) - puslapio elementas. Blokas su tam tikra informacija, nuotrauka, forma.

Padarykite nuostabią svetainę nuo nulio gali būti tik profesionalas. Norėdami tai padaryti, turite suprasti žiniatinklio dizainą ir žinoti HTML. Kadangi baigtas išdėstymas vis dar yra kompetentingas.

Tačiau yra daugiau paprastų būdų. Yra internetinių paslaugų ir programų, kurios automatiškai konvertuoja .psd (Photoshop failo formatą) į HTML ir CSS. Turite teisingai surinkti šabloną.

Norėdami naudoti „Photoshop“, nebūtina būti menininku ir suprasti visas programos galimybes. Bet jei jūs pirmą kartą ją pradėjote ir nežinote, kaip įterpti tekstą, piešti geometrinę formą, kartoti sluoksnį, pakeisti spalvą arba pasirinkti savavališką sritį, turėtumėte pradėti nuo kažko paprastesnio. Norėdami sukurti „Photoshop“ išdėstymą, mums reikia bent jau pradinių įgūdžių dirbant su naudingumu ir suprantant pagrindines funkcijas (kaip piešti liniją, įdėti vadovą, pasirinkti šriftą ir pan.).

Taip pat naudinga bendra informacija apie tinklo paslaugas. Svetainę gali apibūdinti šie kriterijai:

• Vienas puslapis. Visi elementai, turinys, visas turinio turinys yra vienoje vietoje. Viename puslapyje. Norėdami peržiūrėti paslaugos turinį, nespauskite nuorodų arba atidarykite naujų skirtukų. Tuo pačiu metu pati svetainė gali būti savavališka. Tai tinka mažai reklaminei brošiūrai ir didžiuliam 600 puslapių romanui.
• Kelių puslapių. Atitinkamai, yra daug puslapių. Tai gali būti, pavyzdžiui, „Namai“, „Forumas“, „Svečių knyga“, „Atsakymai į dažnai užduodamus klausimus“, „Kontaktai“. Kiekvienam iš jų reikia atlikti išdėstymą. Jums taip pat reikia navigacijos ir svetainės žemėlapio: atskiro skyriaus su nuorodomis į visas paslaugos dalis. Kad vartotojas galėtų greitai rasti jam reikalingą žymę.
• "Guma". Pakeičia dydį priklausomai nuo ekrano skiriamosios gebos. Ištemptas kartu su naršyklės langu. Turime iš anksto apskaičiuoti, kaip atrodys svetainė. Jei 1300 pločio viskas rodoma normaliai, tada 900 pikselių dalis straipsnio gali „eiti“ už rėmo ribų, vaizdai neatsiliks, kaip turėtų, ir „flash“ animacija uždarys įvesties formą.
• Fiksuotas Svetainės įstaiga nekeičia dydžio. Lengviausias ir praktiškiausias variantas. Kad puslapis atrodytų kietas, o plečiant langą kraštuose nebuvo „tuščios“ vietos, galite padaryti gumos foną.

Išdėstymas

Pirma, nuspręskite, kokio dizaino reikia. Nepakanka paprasčiausiai „įsivaizduoti“ ir susitarti „Photoshop“. Turi būti aiškus vaizdas. Nubraižykite raštą ant paprasto popieriaus. Nereikia perrašyti kiekvienos nuotraukos. Pakankamai schema: keli stačiakampiai ir apskritimai, kurie tradiciškai žymi tinklalapio elementus. Pagalvokite, kaip bus įrengti rėmai, kur geriau įdėti logotipą, kur lankytojams pateikti informaciją.

Žr. Interneto puslapių pavyzdžius. Pagalvokite, kuriuos norėtumėte ir kodėl. Nesvarbu, ar tai patogus rėmų išdėstymas, malonios spalvos, ar įdomus požiūris į dizainą. Kopijuoti kažkieno dizainą nėra verta. Užtenka iš jo įkvėpti. Po to galite išsiaiškinti, kaip padaryti svetainę „Photoshop“.

• Sukurkite naują dokumentą („File - New“). Matmenys parenkami skaičiuojant mažus monitorius arba mažą skiriamąją gebą: 1024 × 720 pikselių. Tai yra „informacijos“ dalies plotis, o ne visas vaizdas. Jei norite, kad puslapis būtų 1100 taškų, jums reikia padaryti 1300 pikselių plotį. Ilgis iš tikrųjų nėra fiksuotas - tai priklauso nuo to, kiek turinio norite įdėti į šaltinį. Tai rekomendacijos, o ne taisyklės. Jei norite, galite sukurti didelį išdėstymą.
• Įjunkite valdiklį. Paspauskite Ctrl + R arba eikite į „View“ meniu - valdovai. Tai matavimo skalė. Ji pasirodo už nuotraukos ribų. Be to, turėsite įvertinti dydį ir atstumą „pagal akis“, o tai neturi labai įtakos galutiniam rezultatui. Šią funkciją galite konfigūruoti meniu Redaguoti - Nustatymai - matavimo vienetai ir valdikliai. Kad būtų galima dirbti su vienu parametru, geriau keisti centimetrus vienam pikseliui, o ne skaičiuoti, kiek taškų yra viename colyje.
• Taip pat turėtumėte aktyvuoti tinklelį. Rodyti - Rodyti - Tinklelis arba Ctrl + E (taip pat galite jį išjungti). Tai yra nešiojamojo kompiuterio narvelio analogas. „Photoshop“ bus rodomos vertikalios ir horizontalios linijos. Jie nebus rodomi pačiame brėžinyje. Jie gali būti matomi tik redaguojant. Ši funkcija reikalinga vienodam šablono elementų išdėstymui. Kažkas patogiau dirbti su tinklu, kažkas be jo. Geriausia jį įjungti, jei pirmą kartą gaminate svetainę.
• Norėdami ją konfigūruoti, eikite į Redaguoti - Nustatymai - Gidai, Tinklelis ir fragmentai. Čia galite pasirinkti ląstelių dydį, linijų spalvą ir tipą (kietas, punktyras, iš taškų).

Šiuolaikinio dizaino pavyzdys

• Įdiekite vadovus. Tarp jų bus pagrindinis turinio šaltinis - nuolatinis svetainės objektas. Ir už jų - gumos fonas. Norėdami tai padaryti, spustelėkite Peržiūrėti - Naujas vadovas. Lauke „Orientacija“ pažymėkite „Vertikalus“. Lauke „Pozicija“ įrašykite atstumą, kuriuo objektas bus iš kairės. Dėmesys valdytojo mastui.
• Reikalingi du vadovai - puslapio dešiniajame ir kairiajame kampe. Atstumas tarp jų turi būti ne didesnis kaip 1003 pikselių ekranams, kurių skiriamoji geba yra 1024 × 720. Galite nurodyti kitą plotį. Tačiau dideli ištekliai yra nepatogu peržiūrėti mažuose monitoriuose.
• Kodėl 1003, o ne 1024? Jei svetainėje reikia slinkti žemyn („slinkties“) žemyn, naršyklė turės vertikalią slankiklį, kad galėtų slinkti. Šio slankiklio dydis yra maždaug 21 pikselis. Jei į tai neatsižvelgsite, pasirodys horizontalus slinkimas. Ir norėdami pamatyti visą informaciją, išteklių lankytojas turės perkelti puslapį į kairę ir į dešinę.
• Kūnas turėtų būti drobės centre.

Tai yra parengiamieji darbo etapai. Kaip padaryti Photoshop maketą, priklauso nuo jūsų vaizduotės ir skonio. Todėl toliau bus tik bendros techninės rekomendacijos.

• Pirma, jūsų išdėstymui reikia fono. Jis gali būti pagamintas atskirai arba atsisiunčiamas iš tinklo. Yra daug laisvo tekstūros išteklių. Nedėkite į svetainių vaizdus, ​​kuriems taikomos autorių teisės. Nepriimkite ryškios ar kontrastingos fono. Geriau nenaudoti tekstūrų su daugybe mažų akį traukiančių detalių. Jie atitrauks lankytoją nuo puslapio kūno.
• Jei tiesiog atidarote „Photoshop“ brėžinį, jis bus įtrauktas į naują skirtuką ir nebus įtrauktas į išdėstymą. Pažymėkite visą foną. Norėdami tai padaryti, naudokite sparčiuosius klaviatūros klavišus Ctrl + A arba pasirinkimo įrankį (jis yra kairėje srityje). Nukopijuokite jį ir įklijuokite jį į šabloną.
• Taip pat ši parinktis galima, jei spustelėsite Redaguoti - įklijuoti.

• Apatiniame dešiniajame sąraše bus rodomas naujas sluoksnis. Jei norite pamatyti galimus veiksmus, spustelėkite jį dešiniuoju pelės mygtuku. Meniu „Sluoksnio parinktys“ galite pakeisti jo pavadinimą. "Overlay Settings" yra pagrindiniai vaizdo nustatymai. Jūs galite padaryti jį švytėti, įspausti, blizgesį, insultą, gradientą. Jei pasirinksite parinktį, pakeitimai bus iškart rodomi „Photoshop“. Yra paruoštų stilių rinkinys. Taigi, iš standartinės tekstūros sukuriami originalūs dizaino sprendimai. Ir neimkite nieko daugiau.
• Mygtukas „Filtrai“ yra meniu juostoje. Čia rasite įvairių imitacijų (pastelė, akvarelė, pieštukai), stilių, tekstūras, eskizus, akcentus, neryškumą.
• Galite pasirinkti paprastą foną. Spalva priklauso nuo jūsų asmeninio pasirinkimo. Bet tai geriau ne padaryti juodą ar nuodingą. Tinkami pakratai ir minkšti tonai arba permatomi šalti (pavyzdžiui, šviesiai pilka, šviesiai mėlyna).
• Po tekstūros galite surinkti saitą. Čia jūs turite laisvę kurti.
• Jei norite pridėti tam tikrą formą (liniją, kvadratą, ovalią), spustelėkite atitinkamą mygtuką dešinėje. Ji turės objekto, kuris šiuo metu pasirinktas piešimui, išvaizdą ir pavadinimą. Pavyzdžiui, „Ellipse Tool“, „Polygon Tool“. „Photoshop“ formų skaičius yra ribotas. Tačiau juos galima rasti internete, atsisiųsti ir įdiegti per meniu Redaguoti - Nustatyti tvarkymą. Lauke Type (tipas) nurodykite, kurią objektų kolekciją įkeliate.
• Skirtingose ​​programos versijose šie skaičiai vadinami įvairiais būdais. Arba mažo juodo trikampio formos mygtukas (jis yra dešinėje), arba perjungimo piktograma arba „Taško forma“ elementas (jis yra po meniu juosta). Objektai gali būti sujungti, sugrupuoti, sudaryti jų kompozicijas.
• Norėdami sukurti teksto rėmelį, spauskite mygtuką didžiosios raidės „T“ forma. Tada pasirinkite vietą, kurioje turėtų būti simboliai, spustelėkite ten ir įveskite tai, ko jums reikia.
• Kiekvienas elementas yra geriau įdėti į atskirą sluoksnį. Taigi bus patogiau perkelti ir redaguoti, nepažeidžiant visos svetainės. Norėdami pridėti šį objektą, eikite į sluoksnius - Naujas.

• Jei norite projektuoti vaizdą į iš anksto pasirinktą sritį, pirmiausia pasirinkite ją ir atidarykite „Edit - Paste Special“. Bus „Įterpti vietoj“ ir „Įterpti išorę“ parinktis.
• Galite perkelti dalį vienos nuotraukos į naują sluoksnį. Norėdami tai padaryti, pasirinkite jį, dešiniuoju pelės klavišu spustelėkite jį ir pasirinkite „Iškirpti į naują sluoksnį“.
• Su formomis, antraštėmis ir vaizdais yra tos pačios parinktys kaip ir fone: efektai, filtrai ir pan.
• „Photoshop“ vis dar yra daug įrankių piešimui: šepečiai, rašikliai, pieštukai.

Galite sukurti kokybišką šaltinį net ir iš paprastų geometrinių objektų.

Yra išteklių su nemokamais išdėstymais. Įdėkite juos į „Photoshop“ ir, jei reikia, redaguokite. Tai lengviau ir greičiau, nei piešimas iš nulio.

Kaip paversti išdėstymą į html failą?

Jūs supratote, kaip sukurti svetainę „Photoshop“, ir sukūrėte savo pirmąjį išdėstymą. Ką daryti toliau? Galų gale, jis gali ne tik įkelti į prieglobą.

Jis gali būti suteiktas koduotojui, kuris pagamins aukštos kokybės html šabloną. Tačiau yra dar viena galimybė. Naudokite šias paslaugas PSD failui konvertuoti į HTML ir CSS.

• Psd2Html konverteris. Mokama internetinė paslauga. Greitai konvertuokite „Photoshop“ formatą į tinklalapio šabloną. Naudodami šį šaltinį, net ir iš prastos kokybės, galite sukurti tinkamą svetainę.
• HTML Panda.
• PSDCenter
• 40 dolerių žymėjimas.

Konstruktoriai

Maketai taip pat gali būti renkami specialiose svetainėse. Paprastai yra aiški ir intuityvi sąsaja. Jūs paprasčiausiai surenkate šabloną iš įvairių dalių. Kai kurie elementai yra geriausi Photoshop. Taigi jūs gaunate originalų dizainą. Nepaisant to, kad jis buvo sukurtas konstruktoriui.

„Photoshop“ ne tik piešia. Ji renka svetainių išdėstymus. Daugeliu atvejų tai atlieka kapitonai. Bet paprastas šablonas gali padaryti bet kurį asmenį. Reikia tik pagrindinių „Photoshop“ žinių.