Niranth; Pagsasalin: Slutskaya Svetlana

Ang paglikha ng kaakit-akit at functional na mga web layout ay isang mahalagang bahagi ng buhay ng isang web designer. Sa araling ito Photoshop gagawa kami ng isang propesyonal na layout ng website mula sa simula. Sa panahon ng aralin matututuhan mo ang ilan kapaki-pakinabang na mga trick kapag gumagawa ng disenyo.

Mga Mapagkukunan ng Aralin:

1. Icon Set (wefunction.com)
   Alternatibong icon set
2. Icon ng Twitter (iconeden.com)
3. Font Bebas (dafont.com)

Hakbang 1. Mockup

Bago tayo magsimulang gumawa ng layout ng website, kailangan nating gumawa ng sketch plan ng hinaharap na layout, na magpapakita ng functionality at approximate nito. hitsura.

Hakbang 2. Gumawa ng dokumento.

Gagawa kami ng layout ng website na 960 pixels ang lapad. Upang gawin ito, lumikha bagong dokumento laki 1200x1500 pixels. Resolution 72 pixels.

Dahil ang layout ng site ay magiging 960 pixels ang lapad, kailangan nating tukuyin ang lugar na ito sa pamamagitan ng pagdaragdag ng mga gabay. Piliin ang buong dokumento ( Ctrl+A).

Pumunta sa menu na Select - Transform Selection(Piliin > Transform Selection). Sa property bar sa itaas ng screen, itakda ang lapad sa 960 pixels. Ito ang magiging working area ng layout.

Itakda ang mga gabay nang eksakto sa mga hangganan ng pagpili.

Kailangan nating gumawa ng margin sa pagitan ng mga gilid ng layout ng work area at ng content area na idaragdag natin sa ibang pagkakataon. Gamit ang dokumentong aktibong napili, pumunta muli sa menu Pinili - Ibahin ang anyo ng Pinili(Piliin > Transform Selection). Bawasan ang lapad ng pagpili sa 920 pixels. Nangangahulugan ito na magkakaroon ng 20 pixels ng padding sa bawat panig ng layout, para sa kabuuang 40 pixels.

Magtakda ng mga alituntunin kasama ang bagong pagpili:

Hakbang 3. Lumikha ng header ng site.

Magpatuloy tayo sa paggawa ng header ng site. Gumawa ng 465px na mataas na seleksyon sa itaas ng layout.

Punan ang pagpili kulay abo, at pagkatapos ay gumamit ng mga estilo ng layer upang ilapat ang mga kulay at gradient.

Magdagdag ng gradient fill sa header gamit ang isang layer style gradient na overlay(Gradient Overlay). Lumikha ng gradient ng dalawang kulay.

Ngayon ang header ay magiging ganito:

Ngayon ay kailangan mong magdagdag ng pag-iilaw sa header. Lumikha bagong layer (Ctrl + Alt + Shift + N) at pumili ng malambot na brush na may sukat na 600 pixels. Piliin ang kulay #19535a at gamitin ang brush upang mag-click nang isang beses sa gitnang tuktok ng header.

Gumawa ng 110px na seleksyon sa header.

Pindutin ang key Tanggalin upang tanggalin ang napiling bahagi.

I-flip ang layer ng highlight nang patayo (Ctrl+T).

Kailangan mong tiyakin na ang liwanag na lugar sa takip ay eksaktong nasa gitna. Upang gawin ito, gawing aktibo ang mga layer na may header at i-highlight at piliin ang tool Gumagalaw(Move Tool) (V). Sa property bar sa itaas ng screen, i-click ang button na Align Horizontal Centers.

Lumikha ng bagong layer (Shift + Ctrl + N) at gumuhit gamit ang tool Lapis(Pencil Tool) isang punto, 1 pixel ang laki. Para sa pagguhit gumamit ng kulay #01bfd2.

Pakinisin natin ang mga gilid ng layer na ito gamit ang isang gradient mask. Pumili ng tool Gradient(Gradient Tool) at lumikha ng gradient gaya ng ipinapakita sa ibaba:

Maglagay ng bagong layer na may mask at punan ito ng gradient na kakagawa mo lang.

Hakbang 4. Gumawa ng pattern

Ngayon, gumawa tayo ng simpleng pattern na idaragdag natin sa header. Tool Lapis(Pencil Tool) na may sukat na 2 pixels, gumuhit ng dalawang puntos, tulad ng ipinapakita sa figure. I-off ang visibility ng layer ng background nang ilang sandali (mag-click sa icon ng mata sa tabi ng layer ng background) at lumikha ng isang pattern (Pag-edit - Tukuyin ang Pattern)(I-edit > Tukuyin ang Pattern):

Lumikha ng bagong layer (Shift + Ctrl + N) at ilagay ito sa ilalim ng highlight layer. Piliin ang lugar kung saan mo gustong ilapat ang pattern at buksan ang window Punan(Punan) (Shift + F5). I-click ang OK.

Pagkatapos idagdag ang texture, ganito ang hitsura ng header:

Gawin maayos na paglipat mula sa pattern hanggang sa header: magdagdag ng mask sa pattern layer at gumamit ng malambot na brush puti(#ffffff) na may opacity 60% pumunta sa ibabaw ng mask.

Resulta:

Hakbang 5. Magdagdag ng logo

Magpatuloy tayo sa pagdaragdag ng logo. Pumili ng malambot na brush na may kulay na #19535a at magpinta ng isang spot.

Isulat ang teksto:

Magdagdag ng estilo ng layer sa layer ng logo anino(Drop Shadow).

Hakbang 6: Pag-navigate

Magdagdag ng navigation text.

Gumuhit ng navigation button gamit ang Rectangular Marquee Tool. Punan ang pagpili ng anumang kulay at bawasan ang parameter ng Punan sa zero.

Magdagdag ng istilo sa layer ng button gradient na overlay(Gradient Overlay).

Hakbang 7: Slider ng Nilalaman

Gumawa ng seleksyon ng 580x295 pixels.

Punan ang pagpili ng anumang lilim ng kulay abo.

Maglagay ng larawan. I-clip ito gamit ang layer na ginawa mo kanina.

Ngayon, magdagdag tayo ng epekto sa slider. Lumikha ng bagong layer (Shift + Ctrl + N), piliin Magsipilyo(Brush Tool) na may diameter na 400 pixels. Buksan ang Brush palette (F5) at itakda ang mga parameter na ipinapakita sa screenshot:

Pumili ng itim na kulay (#000000) at gumuhit ng isang lugar:

Maglagay ng filter upang mapahina ang mga gilid Gaussian Blur(Gaussian Blur).

Piliin ang ibabang kalahati ng anino at tanggalin (Tanggalin).

Ilagay ang shadow layer sa itaas ng slider:

Pisilin ang layer ng anino sa gitnang hawakan (Ctrl + T), at pagkatapos ay igitna muli ang layer ng anino: piliin ang parehong mga layer at mag-click sa pindutan sa panel ng mga katangian Pag-align ng mga sentro nang pahalang(Ihanay ang mga Pahalang na Sentro).

Doblehin ang layer ng anino (Ctrl + J) at ilagay ang duplicate sa ilalim na gilid ng slider.

Gumuhit ng mga pindutan sa slider gamit ang tool Parihabang marquee(Rectangular Marqee Tool ) . Punan ang mga pindutan ng itim (#000000).

Bawasan ang opacity ng layer ng button sa 50%.

Magdagdag ng hugis ng arrow sa iyong mga pindutan ng slider:

Sa ibaba ng slider, gumuhit ng guhit at punan ito ng itim (#000000).

Bawasan ang opacity ng stripe layer sa 50%.

Magdagdag ng paglalarawan ng iyong proyekto sa bar na ito:

Hakbang 8. Magdagdag ng text ng pagbati

Sumulat ng isang teksto ng pagbati:

Hakbang 9. Tinatapos ang header ng site

Halos tapos na kaming magtrabaho sa header ng site. Magdagdag ng banayad na anino gamit ang tool Magsipilyo(Brush Tool).

Mag-iwan ng 1 pixel na agwat sa pagitan ng anino at ng pamagat.

Lumikha ng bagong layer sa ibaba ng layer ng header (Shift + Ctrl + N) at maglapat ng gradient dito.

Hakbang 10. Magdagdag ng mga pindutan para sa slider

Gumuhit ng mga pindutan ng pagbabago ng slide.

Magdagdag ng estilo ng layer sa isang button anino sa loob (Inner Shadow), at pagkatapos ay i-duplicate ang button layer sa kinakailangang bilang ng beses (Ctrl + J).

Hakbang 12. Gumawa ng content separator

Gamitin ang Pencil Tool at gumuhit ng light gray (#aaaaa) na linya na 1 pixel ang lapad.

Magdagdag ng mask sa layer ng linya at gumamit ng gradient upang lumikha ng maayos na paglipat sa mga gilid.

Hakbang 13. Magdagdag ng Nilalaman

Panahon na upang magdagdag ng mga lugar para sa nilalaman. Ang bahagi ng nilalaman ay hahatiin sa 3 mga column na magkapareho ang pagitan. Magkakaroon ng 25 pixel indent sa pagitan ng bawat column.

Bago tayo magsimulang magdisenyo ng layout ng website, kakailanganin natin ng sketch na magpapakita ng hitsura at functionality nito. Para sa sketch, gumamit lang ako ng mga kulay abong tono para sa pangkalahatan ay tumutok sa "layout" at hindi na mag-abala pa sa mga kulay. Bilang resulta, maaari mong mabilis na magpalit o mag-redo ng isang bagay anumang oras.

2. Gumawa ng dokumento

Ang layout ng site ay magiging 960 pixels ang lapad, kaya kailangan naming gumawa ng dokumento na may mga sukat na 1200x1500 pixels, na may resolution na 72 pixels/inch.

Napagpasyahan namin ang lapad, ngayon kailangan naming italaga ang lugar na ito gamit ang . Pindutin ang Ctrl + A upang piliin ang buong dokumento.

Pumunta sa Piliin at piliin ang Transform Selection. Sa bar ng mga pagpipilian sa itaas, itakda ang lapad sa 960, ito ang lugar ng pagtatrabaho ng layout sa hinaharap.

Maglagay ng mga gabay sa mga gilid ng seleksyon.

Ngayon ay gagawa kami ng margin sa pagitan ng hangganan ng lugar ng trabaho at ng lugar para sa nilalaman na idaragdag sa ibang pagkakataon. Siguraduhin na mayroon kang isang seleksyon na aktibo, pagkatapos ay pumunta muli sa menu na Piliin > Transform Selection (Selection - Transform ang napiling lugar). Bawasan ang laki ng lapad sa 920 pixels. Nangangahulugan ito na may lalabas na indent na 20 pixel sa magkabilang panig ng layout, at sa kabuuan ay 40 pixels.

Magdagdag tayo ng dalawa pang patayong gabay sa mga gilid ng bagong seleksyon.

3. Paglikha ng header ng site

Sa itaas ng layout, gumawa ng seleksyon na may taas na 465px.

Punan ang napiling lugar na may kulay-abo na tint sa ibang pagkakataon ilalapat namin ang mga estilo ng layer dito upang baguhin ang kulay.

Magdagdag ng gradient sa header gamit ang estilo ng Gradient Overlay. Ang gradient ay binubuo ng dalawang kulay #0f201c at #002931.

Ito ang dapat mong makuha:

Ngayon, magdagdag tayo ng ilang ilaw sa header. Kumuha ng soft-edged na brush na may diameter na 600px, kulay - #19535a at sa isang bagong layer, i-click ang brush sa itaas na gitna ng header.

Sa itaas ng header, gumawa ng 110px na seleksyon.

Sa pamamagitan ng pagpindot sa Delete key, tanggalin ang napiling lugar.

Gamit ang Free Transform (Ctrl + T), i-flip ang highlight layer nang patayo.

Siguraduhin na ang ilaw ng header ay ganap na nakasentro. Upang gawin ito, i-activate ang mga layer na may highlight at header, piliin ang Ilipat (V) mula sa toolbar. Sa itaas ng bar ng mga opsyon, piliin ang I-align ang Mga Pahalang na Sentro.

Paggawa ng bagong layer, gamitin ang Pencil Tool (B) para gumuhit ng 1 px na linya sa lapad ng buong dokumento. Kulay - #01bfd2.

Gamit ang isang gradient mask, pakinisin ang mga gilid ng ginawang linya. Kunin ang Gradient Tool (G) at ayusin ito tulad ng screenshot sa ibaba:

Punan ang nilikha na layer ng isang gradient.

4. Paggawa ng pattern

Palamutihan namin ang header ng layout na may checkered pattern. Gamit ang 2 pixel na lapis, gumuhit ng dalawang tuldok na matatagpuan pahilis. I-disable ito saglit layer ng background sa pamamagitan ng pag-click sa mata sa tabi ng thumbnail ng layer ng background. Pagkatapos ay lumikha ng pattern sa pamamagitan ng pagpunta sa Edit menu at pagpili sa Define Pattern.

Sa ibaba ng highlight, lumikha ng isang bagong layer. Piliin ang lugar kung saan mo gustong ilapat ang pattern. Sa pamamagitan ng pagpindot Shift key+ F5 punan ang header.

Resulta:

Ang natitira lamang ay gumawa ng isang maayos na paglipat mula sa pattern hanggang sa sumbrero. Pagkatapos magdagdag ng maskara sa layer ng pattern, gumawa ng isang maayos na paglipat gamit ang isang malambot na puting brush na may opacity na 60%.

Tingnan ang resulta:

5. Pagdaragdag ng logo

Ang isang logo ay isang mahalagang bahagi ng bawat website. Upang gawin ito, kumuha ng malambot na brush, itakda ang kulay sa #19535a at magpinta ng lugar sa kaliwang sulok sa itaas.

Pagkatapos ay isulat ang teksto para sa logo.

Ilapat ang mga sumusunod na epekto dito:

gradient overlay:

6. Pag-navigate

Gumawa ng button para sa napiling kategorya ng nabigasyon gamit ang Rectangular Marquee Tool (M). Punan ang napiling lugar ng anumang kulay at ibaba ang halaga ng punan sa 0%.

7. Slider ng Nilalaman

Lumikha ng lugar ng pagpili na 580x295 pixels.

Punan ang napiling lugar ng anumang lilim kulay abo.

Ilagay ang imahe sa itaas at ilakip ito sa ilalim na layer.

Kailangan mong magdagdag ng anino sa slider. Paggawa ng bagong layer, kunin ang Brush (B) na may sukat na 400px at pindutin ang F5 key upang buksan ang window ng mga setting ng brush. Tingnan ang larawan sa ibaba para sa lahat ng mga setting.

Itakda ang kulay sa itim at gumuhit ng isang lugar.

Upang palambutin ang mga gilid, gamitin ang filter na Gaussian Blur.

Gumawa ng isang pagpipilian para sa ibabang kalahati ng anino at tanggalin ito.

Ilagay ang anino sa tuktok ng slider.

Una, paliitin ng kaunti ang anino, at pagkatapos ay igitna ito gamit ang Align Horizontal Centers function.

I-duplicate ang anino at maglagay ng kopya sa ibaba ng slider.

Gamit ang Rectangular Marquee Tool (M) sa slider, lumikha ng dalawang button at punan ang mga ito ng itim.

Para sa layer ng button, babaan ang opacity sa 50%.

Gamit ang karaniwang mga hugis ng Photoshop, magdagdag ng mga arrow sa mga pindutan.

Gumawa ng guhit sa ibaba ng slider at punan ito ng itim.

Para sa guhit, babaan ang opacity sa 50%.

Dito maaari kang magdagdag ng paglalarawan para sa iyong proyekto.

8. Welcome text

Sa kaliwa ng slider, ilagay ang iyong text ng pagbati.

9. Tinatapos ang header

Tinatapos namin ang gawain sa header. At sa wakas, gumamit ng brush upang magdagdag ng bahagyang kapansin-pansing anino.

Mag-iwan ng distansya na 1 pixel sa pagitan ng anino at ng pamagat.

Lumikha ng bagong layer sa ibaba ng layer ng header. Mag-apply ng gradient dito.

10. Mga pindutan para sa slider

Panahon na upang magdagdag ng mga pindutan upang baguhin ang mga slide.

Maglapat ng Inner Shadow layer style sa unang button para gawing aktibo ito.

11. Tagahiwalay ng nilalaman

Sa ibaba lamang ng mga button para sa slider, gumuhit ng isang linya ng mapusyaw na kulay abong #aaaaaa, 1 px ang lapad.

Pagkatapos magdagdag ng mask sa linya, gumawa ng maayos na paglipat sa mga gilid gamit ang isang gradient. Gumawa kami ng linyang naghahati.

12. Pagdaragdag ng nilalaman

Ngayon, magdagdag tayo ng mga lugar para sa bahagi ng nilalaman. Hahatiin sila sa 3 column na may 25px indentation.

Maglagay ng mga patayong gabay sa magkabilang dulo ng mga speaker.

Para sa bawat column, magdagdag ng pamagat at angkop na icon. Sa ibaba ng mga heading, magdagdag ng nilalaman.

Gamit ang tool na Rectangle bilugan na sulok, lumikha ng button na Magbasa Nang Higit Pa. Tiyaking napili ang Shape mode sa Options Bar.

Ilapat ang mga estilo ng Gradient Overlay at Stroke sa button.

I-duplicate ang Read More button (Ctrl + J) nang dalawang beses at ilagay ang mga ito sa bawat column sa ilalim ng content.

Tulad ng dati, kailangan mong lumikha ng isang linya ng paghahati, ilagay ito sa ilalim ng mga pindutan. Sa ibaba, ilagay ang mga kulay abong parihaba at ilapat ang istilong Stroke sa kanila.

Maglagay ng larawan sa bawat parihaba.

Lumikha ng mga anino tulad ng dati at ilagay ang mga ito sa ibaba ng mga lugar ng larawan.

Sa ibaba ng bawat larawan, maglagay ng pamagat, nilalaman, button na Magbasa Nang Higit Pa, at linyang naghahati.

Ilagay ang icon ng Twitter sa ibaba sa unang column.

Pagkatapos ay mag-post sa Twitter.

Gumuhit ng isa pang button na Higit pang Mga Tweet.

Ilapat ang mga estilo ng Gradient Overlay at Stroke sa button na ito:

Isulat ang tekstong Higit pang Mga Tweet dito.

13. Gumawa ng footer

Sa pinakailalim ng layout ng site, lumikha ng napiling lugar at punan ito ng kulay abo.

Maglapat ng istilo ng Color Overlay sa footer.

Panghuli, ilagay ang navigation at copyright sa footer.

Handa na ang layout ng site!

Mga NilalamanPaglikha ng mga layout ng website: libangan para sa mga piling tao Pagbuo ng layout ng website: mga yugto Paraan Blg. Pagputol ng layout mula sa template ng website Paraan Blg. 2. Paglikha ng layout ng website sa halos Photoshop Method No. 3. Online na mockup tool

Upang magsimula sa, isipin ang tungkol sa bakit ka nagpasya na gumawa ng layout ng website sa iyong sarili. Ang trabahong ito ay nangangailangan ng maraming nalalaman na kaalaman mula sa isang tao sa IT at disenyo, analitikal at malikhaing pag-iisip sa parehong oras. At ilang bahagi din ng iyong oras. Okay, may 4 na dahilan kung bakit maaaring kailanganin mo ito. Kung mayroon kang iba, sumulat sa mga komento, idaragdag ko ito.

Paglikha ng mga layout ng website: masaya para sa mga piling tao

Dahilan #1. Interes sa pagbuo ng mga layout ng website

Napakaespesipiko ba ng iyong mga interes? Nandito na kami hindi namin hinuhusgahan ang sinuman. Noong unang panahon ito ay naging kawili-wili para sa amin, at sinimulan naming gawin ito! Bilang karagdagan, ang pagkauhaw sa kaalaman ay atin tampok na nakikilala. Pinahahalagahan ko ang iyong pagkamausisa.

Dahilan #2. Ang pagbuo ng layout ng website bilang isang paraan upang kumita ng pera

Kung gusto mong maging isang web designer sa hinaharap, kailangan mong magsimula sa isang lugar, lalo na mula sa elementarya na layout ng pahina ng site. Mabilis na resulta nag-uudyok sa kanyang trabaho na walang iba. Sa kabutihang palad, sa artikulong ito ay iminumungkahi ko lamang blitz na paraan para gumawa ng layout.

By the way, hindi biro ang gawa ng isang web designer. Dito sa ibaba ay mag-iiwan lang ako ng iskedyul ng suweldo depende sa haba ng serbisyo (ayon sa data ng DOU para sa Mayo-Hunyo 2016). Wala akong pinapahiwatig. Nakatago lang sa pangangaso.

Dahilan #3. Pagguhit ng mga teknikal na detalye para sa pagbuo ng isang layout ng website para sa isang taga-disenyo

Kadalasan ang mga hindi taga-disenyo ay nahaharap sa pangangailangang ipakita ang layout ng isang website - minsan lang upang ilarawan ang iyong ideya, pero minsan upang palakasin ang mga teknikal na pagtutukoy. Siyempre, hindi ito kinakailangan at mauunawaan ng isang karampatang taga-disenyo ang iyong ideya at gagawin pa nga ito nang mas mahusay kaysa sa iyong inaasahan. Gayunpaman, kung alam mo nang eksakto kung ano ang gusto mo, mas mahusay na ipakita ito sa halip na sabihin ito.

Maginhawa ring gamitin ang app Coggle, na maaari mong ikonekta UpangGoogleMagmaneho.

Gusto ko si Coggle dahil mind map ito. laging nasa kamay, ito ay maginhawa upang ibahagi sa mga kasamahan, at ang mga kulay ng mga elemento ng interface ay mahusay na napili. Plus ito gumagana kanang pindutan mouse, na nagbibigay-daan sa iyong i-customize nang maayos ang mapa. Nakuha ko ang istrakturang ito para sa home page site.

Sa unang yugto ng pagdidisenyo ng layout, isang mind-map ng site ay nilikha

Stage 2: Paglikha ng isang prototype ng website

Susunod, maaari mong simulan agad ang pagguhit ng layout ng website sa Photoshop, ngunit kahit na gumawa ka ng layout dahil sa idle curiosity, una dapat kang gumuhit ng isang prototype ng website. Sa hakbang-hakbang na pag-unlad, ang prototyping ay isang mahalagang yugto na nagpapalakas sa kalusugan ng isip ng isang web designer. Kapag lumilikha ng isang prototype, ito ay pinlano pangunahing mga bloke ng hinaharap na site(header, slider, mga pindutan, mga contact, istraktura ng materyal, atbp.). Ito ay nagbibigay-daan sa iyo upang makabuluhang makatipid ng oras sa yugto ng pagguhit ng layout dahil makikita mo ang tinatayang resulta at gumawa ng mga pagbabago nang walang sakit.

Pagod na? Gawing mas madali ang buhay at mag-order ng website development mula sa KOLORO. Isasaalang-alang namin ang iyong mga kagustuhan at makukuha mo kung ano mismo ang gusto mo.

Paglikha ng isang prototype ng website online

Karaniwang ginagamit ko ang dalawang pinakasikat na online na tool para sa prototyping ng website: Moqups at Mockflow. Sa parehong mga kaso mayroong pagkakataong lumikha ng mga prototype nang libre, ngunit may limitadong pag-andar. Ang mga taripa para sa unang site ay nagsisimula sa $13/buwan. (10 proyekto, 1 GB), at para sa pangalawa - mula $14/buwan. (walang limitasyong bilang ng mga proyekto + 25 GB sa cloud). Inirerekomenda din ng lahat ang Mockingbird. At irerekomenda ko ito, ngunit bilang paggalang lamang kay Eminem, dahil dito ang 3 proyekto ay nagkakahalaga ng $12/buwan, at may mas kaunting mga libreng tool.

Ngayon tungkol sa aking mga personal na impression. Mga moqups mas maginhawa at intuitive kahit na mula sa unang pagbisita. Mayroong maraming handa na mga bloke at mga icon dito - kung ano ang kailangan mo upang mabilis na makarating sa yugto ng prototyping. Bilang karagdagan, ang mga elemento ay maginhawa sentro kaugnay sa gitna ng pahina o iba pang elemento. Medyo nakakabahala limitasyon 300 bagay bawat pahina libreng mode- para sa isang pahinang layout ng website maaaring hindi ito sapat. Posibleng magpasok ng mga elemento mula sa Bootstrap workframe. Mockflow nagbibigay-daan sa iyo na gumawa ng kaunti pang kaunti, at kailangan mo lamang itong malaman sa loob ng ilang minuto at masanay na sa kanya, gayunpaman higit pa espasyo sa disk maaaring makaakit ng isang tao.

Mga prototype ng website sa Moqups at Mockflow

Paano mag-prototype ng isang hinaharap na website?

Tingnan natin ang halimbawa ng Moqups paano gumawa ng prototype ng page may text para sa blog.

Hakbang 1. Idagdag sumbrero(maaaring baguhin ang teksto).

Hakbang 2. Idagdag harangan para sa larawan at inskripsiyon (pamagat ng artikulo). Gamit ang mga istilo, maaari mong madaling baguhin ang laki, font, at iba pang pag-format ng teksto.

Hakbang 3. Idagdag text at magtanong lapad mga hanay. Ang lahat ng mga bloke ay maginhawang nakasentro kaugnay sa gitna ng pahina.

Hakbang 4. Dapat na hatiin ang teksto larawan. At ang lapad ng column ay masyadong malaki, ang 500 px ay mas maganda. Sa kabutihang palad, maaari mong mabilis na baguhin ito. Isang malaking plus: ang mga napiling elemento ay nabawasan sa isa't isa at ang aking bloke na may larawan ay naging mas maliit din.

Hakbang 5. Idagdag sidebar(side column), magiging simple ito dito. Maglagay tayo ng patlang para sa paghahanap at isang bloke para sa mga subscription sa newsletter (na may kaakit-akit na larawan at isang maliwanag na pindutan).

Hakbang 6. Sabihin nating ang aming artikulo ay naging ganito kaliit. Maaari ka ring magdagdag survey At rating mga artikulo. Ang resulta ay isang maayos na prototype ng isang pahina ng blog. Magdagdag ng iba pang mga elemento ayon sa gusto mo.

Pinapayagan ng prototyping tingnan ang sukat ng pahina at gumawa ng mga desisyon tungkol sa ilang mga bloke. Sa pamamagitan ng paraan, gamit ang mga tool na ito maaari kang gumawa ng mga prototype para sa iba't ibang mga aparato. Halimbawa, kung susubukan mo, makakakuha ka ng ganito. Gayunpaman, ang prototype ay karaniwang limitado sa isang itim at puting disenyo.

Prototype ng application ng smartphone

Stage 3: Paggawa ng magandang layout ng website: pagpili ng kulay

Depende sa matagumpay na pagpili ng mga kulay pang-unawa sa site At tatak ng mga gumagamit. Hindi ko inirerekumenda na umasa sa iyong sariling lakas - ang pagpili ng tamang lilim ay maaaring tumagal ng ilang oras. Samakatuwid, inirerekumenda ko ang paggamit handa na mga palette ng kulay para sa web. Naglabas kamakailan ang Google ng isang detalyadong gabay sa magagandang kulay para sa disenyo ng materyal ( uso sa disenyo ng web). Ang mga kulay na ito ay gumagana nang maayos at maaari mong tiyakin ang kanilang pagiging kaakit-akit. Gamit ang Materialpalette, maaari mong matagumpay na pumili ng dalawang kulay - ang pangunahing isa at ang accent, at makita din kung ano ang magiging hitsura ng mga ito sa interface. Kaunting kulay sa Mga Kulay ng Disenyo ng Materyal.

Naipakita mo na ba ang site? Nakagawa ka na ba ng prototype? Napili mo na ba ang iyong mga kulay? Ngayon ay maaari kang magpatuloy sa paglikha ng mismong layout. Nag-aalok ako sa iyo ng ilang paraan.

Pansin! Walang magiging payo dito kung paano gumawa ng layout ng website sa Photoshop - ito ay isang paksa para sa isang hiwalay na artikulo, narito ang mga mas simpleng pamamaraan.

Paraan numero 1. Pagputol ng layout mula sa template ng website

o umiiral na mga site

Ang pamamaraang ito ay angkop para sa iyo kung gusto mo:

• alamin ito mga pangunahing kasangkapan Photoshop;
• maghanap ng iba mga sanggunian para sa iyong hinaharap na website at pagsama-samahin ang mga ito;
• pakiramdam designer sa loob ng ilang oras;
• ipakita sa isang web designer o ahensya (halimbawa, sa amin:) ang pinaka detalyadong pangitain ng site;
• palakasin TK para sa pagbuo ng website hindi lamang "narito ang mga pindutan ng tawag, at narito ang separator at lead magnet."

Ang mga bentahe ng diskarteng ito sa pagbuo ng layout:

• kaya mo maiwasan ang mga karaniwang pagkakamali, na nakakita ng sapat na kalidad ng mga site;
• maiintindihan mo ano ang hindi dapat gawin upang gawin itong mabuti;
• malinaw na gagawin ng mga tagapalabas ng disenyo ng web isipin kung ano ang iyong inaasahan;
• Ito napakabilis- sa ilang oras gagawa ka ng mga layout para sa lahat ng pahina ng site.

Cons:

• hindi mo lubos na mauunawaan kung ano ang disenyo ng web;
• Ang ilan sa mga reference na makikita mo ay hindi maipapatupad ng taga-disenyo ng layout nang hindi binabago ang ibang bahagi ng site.

Paano ito nagawa

Ang pinakasimpleng at mabilis na paraan gumawa ng layout ng website - pumili template para sa isang tiyakCMS at muling gawin ito para sa iyong sarili. Samakatuwid, kailangan mo munang magpasya sa isang CMS, na lubos na magpapadali sa pag-unlad ng site. Gayunpaman, mangyaring tandaan na ang disenyo ng site ay magiging maging limitado ang mga elementong iyon na nasa template. Siyempre, maaari mong baguhin ang mga kulay, ngunit ang mga indibidwal na elemento ng interface ay handa na at hindi mo na mababago ang mga ito.

Kung gagawin mo "stew" mula sa iba't ibang mga site, huwag kalimutang magsulat sa isang lugar sa iyong kuwaderno gamit ang lapis pinagmumulan. Pasimplehin nito ang karagdagang pagbuo ng disenyo at layout ng layout.

Mga layout ng website para sa Wordpress

Ang pinakasikat na CMS ay Wordpress. Halimbawa, makakahanap ka ng maraming modernong template para sa CMS na ito. Para saan? Website sa isang template makabuluhang pinabilis ang paglulunsad ng proyekto, gayunpaman hindi ito magiging kakaiba. Bagaman, kung gumamit ka ng orihinal na mga guhit, mga larawan at isang malikhaing diskarte - kahit na ang layout ng template ay maaaring gawing muli nang hindi nakikilala. Ang pangunahing bentahe ay ang iyong website ay garantisadong maging adaptive at sa pangkalahatan ay maganda sa mga tuntunin ng ipinapakita sa iba't ibang device.

Tingnan iba't ibang mga template at piliin ang pinaka gusto mo. Naghanap pa ako sa Envato Market at nakita ko ang template ng Dalton na pinakagusto ko. Sa pamamagitan ng pagpunta sa demo na bersyon template, makikita mo kaagad ang konsepto ng isang corporate website. Sa pamamagitan ng pag-click sa menu maaari kang makakita ng higit pa nang detalyado kung anong mga function ang mayroon ang template kung ano ang magiging hitsura nila iba't ibang pahina. Pinakamainam na gumugol ng kalahating oras dito at talagang maunawaan kung ano ang nasa template.

Ano ang susunod? Pagpili ng laki ng layout ng website, pagputol at pagdikit

Kapag kumportable ka na sa template, maaari mong simulan ang pag-edit nito. paghiwa. Mahusay kung ang iyong screen resolution 1920 px o higit pa - ito ay magbibigay-daan sa iyo na kumuha lamang ng mga screenshot ng mga bahagi ng site at pagsamahin ang mga ito sa editor. Ang pagtatrabaho sa layout ay nagsisimula sa header, pagkatapos - iba't ibang mga bloke (katawan), at sa dulo - ang footer.

Kakailanganin mo:

• komportable tool upang kumuha ng snapshot ng isang napiling lugar (pagkuha ng screen tool), gumagamit ako ng Lightshot - nagmumungkahi itong i-save ang imahe sa hiwalay na file o kopyahin ito sa clipboard;
• Photoshop- para sa gluing cut bahagi ng mga imahe.

Mga yugto ng paglikha ng layout para sa isang website batay sa isang template

Hakbang 1. Piliin ang lapad ng layout ng site

Magpasya kung aling pahina ang una mong gagawin. Huwag magsimula sa pangunahin - mas mabuting iwanan ito nang huli, dahil... ito ang pinakamahalagang pahina ng site at una ay mas mahusay na punan ang iyong kamay. Sa halimbawa, gagawa ako ng page na “About Us” - dito na kawili-wiling impormasyon tungkol sa kumpanya at sa mga empleyado nito. meron na ako prototype ng website, para alam ko ang ginagawa ko. By the way, kumusta ang prototype mo?

Buksan ang Photoshop at itakda ang lapad ng layout ng site 1920 px. Ito ay sapat na upang makita kung ano ang magiging hitsura ng site sa browser. Kung mas mababa ang iyong resolution, itakda ito sa lapad na pinapayagan ng iyong monitor. Huwag mag-alala tungkol sa taas pa - mahirap hulaan at kakailanganin mo pa ring i-stretch/kontratahin ang lugar.

Hakbang 2. Patuloy kaming gumagawa ng layout ng website sa Photoshop

Pumili ng isa mula sa template sumbrero, na gusto mo. Putulin sa tulong niya maginhawang kasangkapan, buksan ang dokumento sa Photoshop at ipasok doon (Ctrl+V). Gamitin ang Move Tool (V) upang ilagay ang header sa itaas. Gusto ko ang header na may topbar kung saan naroon impormasyon sa pakikipag-ugnayan tungkol sa kumpanya.

Hakbang 2.A. Gawin kaagad ang tamang layout ng website

Ngayon ay mayroon kang dalawang paraan - baguhin ang teksto sa larawan o isulat kasamang teksto V text file. Alin ang mas maginhawa? Ang lahat ay nakasalalay sa iyong mga layunin. Naka-on personal na karanasan Maaari kong sabihin na mas mahusay na gawin ito sa layout, kaagad pagpili ng font at laki. Ito ay magiging mas ligtas at magiging WYSIWYG sa pagkilos (What You See Is What You Get, "what you see is what you get").

Hakbang 3. Pumunta tayo sa tagumpay

Punan sa akin layout iba't ibang mga bloke at i-edit ang mga ito ayon sa iyong mga pangangailangan. Naka-on sa yugtong ito hindi mo kailangang makipaglaro sa mga kulay kung wala kang mga kasanayan gamit ang Photoshop. Upang mapataas ang taas ng layout, gamitin ang tool "Frame"(MAY).

Anong nangyari

Pagkatapos ng ilang minutong pag-iisip, paggupit at pagdikit ng mga piraso na pinakanagustuhan ko, nakuha ko ito nakabalangkas na layout ng pahina"Tungkol sa Amin"

Ang hindi mo dapat kalimutan

1. Tumawag bawat layer may block nang sapat, ayon sa kung ano ang mayroon. Kung hindi, ikaw ay tuluyang mawawala.
2. Kapag pumipili ng isang font kailangan mong pumili magkaibang sukat Para sa mga header at katawan text. Sa kasong ito, mas mahusay na magabayan ng library ng web font ng Google Fonts. Huwag kalimutang i-filter ang mga Cyrillic na font.

Paraan Blg. 2. Ang paglikha ng isang layout ng website sa Photoshop ay halos

Ang paraang numero 2 ay angkop para sa iyo kung:

• mayroon ka HindiPhotoshop(hindi pinapayagan ng konsensya o walang puwang sa disk) o hindi mo pa natutunan kung paano gamitin ito;
• Gusto mo kilalaninHTML code atMga istilo ng CSS nang walang pagkagambala sa mga marka;
• kailangan mo ng interactive na layout ng website.

Inirerekomenda ko ito ay napakarilag libreng tool para sa paglikha ng mga layout ng Macaw. Upang gumana sa programa kailangan mo ito i-download at i-install- ito ay isang bagay ng ilang minuto. Sa programa maaari mong visual mode praktikal na i-layout ang layout, dahil maaari mo itong mai-publish kaagad at makita ang HTML code at CSS. Kaunting detalye tungkol sa kung paano gumagana ang programa. Mayroon si Macaw makabuluhang sagabal- lumilikha siya hindi tumutugon na web page. Paano haharapin ito? Kakailanganin dito ang mga kasanayan taga-disenyo ng layout upang ikonekta ang framework (halimbawa, kung gumagawa ka ng layout ng site para sa Bootstrap). Gayunpaman, kung kailangan mo lamang ipakita gumaganang layout para sa mga kasamahan - Perpekto ang Macaw.

Parang hindi naman tumutugon na template sa iba't ibang device. Gusto kong umiyak

Upang makapagsimula, ilunsad ang program sa iyong computer. Inihahandog namin sa iyong pansin blangkong dokumento na may lapad ng pahina na 1200 px na may grid ng layout ng site. Bilang default, mayroong sa pagitan ng mga column indentation(padding), kaya magkakaroon ng espasyo sa pagitan ng mga nilikhang elemento. Ang kailangan mo lang gawin ay gumuhit sa loob ng mga hanay, dahil kung lalampas ka sa kanila, lilitaw ang mga bloke sa ilalim ng bawat isa. Kaya bantayan mo sila.

Maaari mong independiyenteng itakda ang lapad ng mga haligi, ang kanilang numero at ang distansya sa pagitan nila. Kung gusto mo mga elemento na nakadikit sa isa't isa, itakda ang lapad ng column sa 100% at alisin ang padding sa pagitan ng mga ito. Bakit kailangan mo ang mesh na ito? Sa HTML layout ng site layout magkakaroon Mas madaling gumawa ng tumutugon na template, dahil Ang mga modernong framework ay gumagamit ng 12-column grid.

Maaari mong baguhin ang lapad ng lugar ng trabaho sa pamamagitan ng pag-drag dito sa kanan, o sa pamamagitan ng pagtatakda ng laki mismo

Ano ang susunod? Layout

I-set up lugar ng trabaho sa paraang maginhawa para sa iyo at magtrabaho na tayo. Gagawa ako ng parehong pahina na pinutol ko mula sa template ng Dalton.

Hakbang 1.

Una kailangan mong lumikha sumbrero. Ito ay magiging lalagyan na may taas na 100 px at mababang limitasyon, 1 px ang kapal.

Sa loob ng isa pa lalagyan magkakaroon ng logo, at sa loob ng susunod ay mayroong isang menu. Para sa indibidwal na elemento hindi na kailangang gumawa ng menu magkahiwalay na mga bloke, ito ay sapat na upang magtakda ng isang katanggap-tanggap na distansya sa pagitan ng mga salita (word spacing).

Hakbang 2

SA yari na sumbrero maaari kang magpatuloy sa natitirang mga bloke. Sa susunod na bloke ay magkakaroon ako background na kailangan i-download nang hiwalay.

Hakbang 3. Gumawa ng interactive na layout ng website

Patuloy akong nag-drag ng mga bloke at nagpasok ng teksto sa mga ito. Gumagawa ako ng isang pindutan gamit ang espesyal na kasangkapan « Pindutan"(lohika!). Pinapayagan ka ng Macaw na lumikha ng isang interactive na layout na may iba't ibang kondisyon mga pindutan at ang kakayahang lumipat sa pagitan ng mga pahina.

Pakitandaan ang mga sumusunod na naka-highlight na item. Tinutulungan ka nila na lumipat sa pagitan ng iba't ibang mga bloke at ayusin ang mga ito. Halimbawa, ang text ay dapat nasa isang partikular na lalagyan, at hindi basta tambay.

Kung pinindot mo File ->I-publish, makakatanggap ka ng isang handa na pahina kung saan maaari mong tingnan ang HTML code at CSS iba't ibang mga tab. Ito ay napaka-maginhawa kung gusto mong makita kung ano ang hitsura ng markup.

Anong nangyari

May ganito pala. Narito para sa paghahambing, umalis nakadikit na mga piraso ng na-edit na template, tama- Layout na nilikha sa Macaw. Ang isang malaking plus ng programa ay na maaari kang magpasok ng mga pindutan, magdagdag ng mga link sa kanila, lumikha ng iba't ibang mga pahina at mag-navigate sa pagitan ng mga ito. Huwag lang kalimutan hierarchy ng lalagyan at huwag mawala sa kanila.

Mga tampok ng pamamaraang ito ng paglikha ng layout ng website:

• para maintindihan mga subtleties ng trabaho kailangang gastusin ang mga programa dagdag na oras;
• kahit na nabasa mo na ang programa, kung minsan ay hindi pa rin malinaw kung bakit ito kumikilos nang ganito at hindi kung hindi man;
• maaari mong kalimutan ang tungkol sa kakayahang umangkop kung hindi mo ito tatapusin sa iyong sarili;
• talaga maginhawa upang lumikha ng isang layout at kahit na maunawaan ang layout ng kaunti - maaari mong makita kung paano nakikipag-ugnayan ang mga elemento at kung ano ang istraktura sa pangkalahatan;
• ang mga bagay tulad ng "lapad: 16.6666666666%" ay maaaring lumitaw sa mga istilo, na ay kailangang ayusin; kailangan mo lang maunawaan na ito ay WYSIWG, at wala nang iba pa.

Paraan Blg. 3. Online na mockup tool

Kung naghahanap ka ng opsyon kung paano gumawa layout ng site sa application na may kasing simple at intuitive na interface , inihanda ko ang paraang ito lalo na para sa iyo.

Maginhawang tool para sa paglikha infographics, na matagal ko nang ginagamit - ang serbisyong Creately. Mayroong dose-dosenang at daan-daang bahagi na gagawin Disenyo ng UI para sa iba't ibang device (higit pa para sa mga mobile device). Tiyak na magugustuhan mo ito, ipapakita ko sa iyo ang ilan sa mga ito.

Nandito pa rin maginhawa upang i-edit ang mga elemento, magdagdag ng teksto (at kahit na gumawa ng mga pindutan na may mga link!). Sa pangkalahatan, sa loob lamang ng ilang minuto ay nakuha ko na ang parehong bagay tulad ng sa Macaw, lamang mas maingat. Gayunpaman, ang gayong layout ay hindi maaaring gawing lubos na interactive. Walang mga hakbang sa pamamaraang ito dahil... Ang serbisyo ay mahusay na intuitive. Sa screen sinubukan kong ipakita hangga't maaari mga kakayahan sa serbisyo.

Mga tampok ng serbisyong Creately

Iyon lang. Ito ang mga pamamaraan na narating ko sa isa o ibang yugto ng malikhaing pag-unlad. Kung nakita mong kapaki-pakinabang ang materyal na ito, masaya kami.

P.S. Ang artikulong ito ay para sa mga layuning pang-impormasyon lamang at hindi ka papayagan na maging isang web designer. Upang makakuha ng seryosong kaalaman, kailangan mong gumawa ng higit pang paghuhukay sa Internet.

Sa tutorial na ito, matututunan natin kung paano gumawa ng layout ng blog na istilong minimalist gamit ang mga bagong teknolohiya ng Photoshop. Makakatulong sa amin dito ang mga bagong opsyon para sa paggawa at pag-save ng mga istilo. Mga Estilo ng Character at Estilo ng Talata.

Tingnan natin kung ano ang gagawin natin sa tutorial na ito.

Upang makumpleto ang araling ito, kakailanganin mo ang mga sumusunod na mapagkukunan:

• Libreng font Libreng Font Sansation.
• Texture 26 Nauulit na Pixel Pattern
• Ang Mga Social Icon ay Nagtakda ng Libreng Mga Icon ng Social Media
• Icon ng Hand Cursor
• Stock image Stock photo: Pag-aani 1
• Stock image Stock photo: New York Streets 3
• Stock image Stock photo: Daisy Age
• Stock image Stock photo: Isang puno sa abot-tanaw
• Stock image Stock photo: Mga numero ng benta
• Stock image Stock photo: Time is Money!

Paghahanda ng Canvas

Hakbang 1

Sa tutorial na ito gagamitin namin ang framework 960GS . Kailangan kasama i-download ang template mula sa pangunahing pahina nito at hanapin ang file sa loob ng archive"12 Column Grid".

Mag-click sa icon ng mata sa tabi ng 12 Col Grid layer upang itago ang visibility nito - hanggang sa kailangan natin ito.

Hakbang 2

Sa ngayon, ang sukat ng aming canvas ay medyo maliit. I-click Larawan>Laki ng Canvas(o Ctrl + Alt + C) upang gawing mas malaki ng kaunti ang sukat at itakda ang anchor point sa gitna.

Hakbang 3

I-click Ctrl + Rupang ipakita ang pinuno. I-clickTingnan> Bago Gabay (Tingnan - Bagong Gabay) upang lumikha ng bagong gabay.Pumili Patayo at Posisyon: 185px para gumawa ng patayong gabay na ma-offset ng 185 px mula sa kaliwang gilid.

Hakbang 4

Gumawa ng higit pang mga vertical na gabay sa layo na150 , 1095 At 1130 pixels .

Paghahanda ng Tema ng Kulay

Hakbang 5

Sa aming disenyo ay gagamitin namin ang sumusunod kumbinasyon ng kulay- Colorlouver . Mag-click sa larawan upang buksan ang kumbinasyon ng kulay at i-save bilang JPEG.

Ilagay ang color scheme sa loob ng Photoshop file.Sa pamamagitan ng paglalagay ng mga larawan nang direkta sa loob ng aming template, ang pag-access dito ay magiging mas mabilis at mas madali.

Paghahanda ng background

Hakbang 6

Pumili Layer ng background at mag-click sa icon ng lock upang i-unlock ang layer na ito. I-double click ang larawan upang baguhin ang kulay ng background.

Gamit ang eyedropper, piliin ang pangalawang kulay ng aming scheme ng kulay (# 948371) .

Hakbang 7

Gumuhit ng hugis-parihaba na hugis sa tuktok ng canvas.Ito ang magiging pangalawang background.

Hakbang 8

Piliin ang ginawang form at pumunta sa Option Bar. bukas Punan Kulay at i-click ang icon ng tagapili ng kulay. Kapag lumitaw ang dialog box ng Color Picker, piliin ang unang kulay. Sa bukid Stroke pumili wala

Hakbang 9

Gumawa ng bagong layer at gamitin ang Rectangular Marquee Tool upang piliin ang tuktok na parihaba. I-activate ang gradient fill tool at punan ang napiling lugar radial gradient mula puti hanggang itim.

Baguhin ito mode Haluin mode sa Screen at bawasan ang opacity Opacity sa 37% .

Hakbang 10

Lumikha ng bagong layer at pangalanan itong "anino".

Gumuhit ng isang hugis-parihaba na seleksyon sa ibaba ng pangalawang background tulad ng ipinapakita sa larawan sa ibaba. I-click I-edit: Punan . I-install Gamitin - Itim . I-click OKupang punan ang seleksyon ng itim.

Hakbang 11

Palabuin ito gamit ang Gaussian Blur. I-clickFilter> Blur> Gaussian Blur .

Hakbang 12

Hawakan ang Alt, ilagay ang cursor sa pagitan anino At layer na may pangalawang background. Habang hawak ang Al, i-click upang i-convert ang layer sa isang clipping mask. Ang pag-convert nito sa isang Clipping Mask, ang mga anino ay inilalagay na ngayon sa loob ng tuktok na background.

Hakbang 13

Baguhin ang transparency ng aninoOpacity sa 50% . Sa ibaba makikita mo ang resulta sa 100% magnification.

Hakbang 14

Panahon na upang ilagay ang lahat ng mga layer sa isang grupo. Upang gawin ito, piliin ang lahat ng mga layer at pindutin ang Ctrl + G.

Header

Hakbang 15

Gumuhit ng isang parihaba sa tuktok ng canvas tulad ng ipinapakita sa larawan.

Hakbang 16

Sa panel Opsyon Bar, itakda ang kulay Stroke- #af9f8e .

Hakbang 17

Para sa pagpuno piliin ang mga sumusunod na kulay linear gradient- mula sa#d0c4b9 Upang #a89c91.

Pangalan ng site

Hakbang 18

Sa kaliwang bahagi ng template, idinaragdag namin ang pangalan ng aming site. Pakitandaan na ang pagkakalagay ay tumutugma sa larawan sa ibaba. I-double click ang teksto at idagdagDrop Shadow. Ang font na ginamit sa aralin Sansation.

Menu

Hakbang 19

Gamit ang Sansation 14 pt font, ginagawa namin ang menu. Muli, bigyang-pansin ang pagkakalagay.

Hakbang 20

Para sa aktibong menu button, itakda ang uri ng font sa bold.

Hakbang 21

I-activate ang Polygon tool at itakda ang bilang ng mga gilid sa 3 . Gumuhit ng tatsulok na may kulay na punanPunan: #3d3123at halaga ng strokeStroke: wala. Magdagdag ng anino sa layer -Estilo ng Layer> Drop Shadow .

Hakbang 22

Binibigyang-diin namin aktibong pindutan menu. I-activate Tool sa linya at itakda ang laki nitong timbang -5 pixels. Pumili ng kulay#f76b6a at ang linya ay dapat na walang stroke.

Maglagay ng linya sa ilalim aktibong menu at magdagdag ng 1 pixel na distansya sa pagitan ng linya at hugis-parihaba na hugis.

Paggamit ng Mga Estilo ng Character

Hakbang 23

I-save natin ang mga setting ng istilo para sa teksto. Ito ay tulad ng isang pinasimpleng bersyon ng mga istilo ng character sa InDesign. Upang i-save ang mga ito, kailangan mong i-activate ang teksto, at pagkatapos ay mag-click sa icon na "Bagong Estilo ng Character".

I-double click ang bagong istilo at piliin ang mga sumusunod na setting.

Hakbang 24

Piliin ang susunod na item sa menu at pagkatapos ay i-click ang pindutan ng Character Style upang ilapat ang mga setting ng estilo.Kung makakita ka ng plus sign sa tabi ng mga istilo, nangangahulugan ito na may iba't ibang setting ang mga ito.

Hakbang 25

Ulitin ang nakaraang hakbang upang ilapat ang ginawang istilo sa aktibong menu.

Hakbang 26

Kaya ano ang bentahe ng paggamit ng mga istilo ng karakter? Tutulungan nila kaming isentro ang mga setting ng text. Maaari lang nating baguhin ang istilo ng character upang mai-edit ang anumang teksto. Halimbawa, kung babaguhin mo ang istilo Nangungunang Menu – Normal sa Corbel, lahat ng mga item sa menu ay awtomatikong magiging Corbel.

Hakbang 27

Lumikha ng bagong layer at ilagay ito sa ibaba ng mga item sa menu. I-clickCtrl at mag-click samenu para gawin ang susunod na pagpili. Punan ito itim.

Hakbang 28

Alisin ang pagpili sa pamamagitan ng pag-clickCtrl + D.Palabuin ang itim na bahagi sa pamamagitan ng paglalagay ng filterFilter> Blur> Gaussian Blur .

Slider

Hakbang 29

Gumuhit ng hugis-parihaba na hugis sa buong hanay (tingnan sa ibaba).

Para sa kulay ng fill, piliin #dfd1c2. Kulay Stroke #c8baac, laki 10 pt. Mag-click sa maliit na arrow sa tabi ng linya upang matiyak na napili ang opsyon I-align sa loob.

Hakbang 30

Ipasok ang larawan tulad ng ipinapakita sa figure sa ibaba. I-convert ito sa Clipping Mask sa pamamagitan ng pag-click Ctrl + Alt + G . Ang imahe ay awtomatikong ilalagay sa loob ng slider block. Kung kinakailangan, maaari mong baguhin ang laki at ilipat ito nang hindi naaapektuhan ang frame nito sa anumang paraan.

Hakbang 31

Gumuhit ng isa pang hugis-parihaba na hugis malapit sa slider na may parehong kulay.Siguraduhin na ang hugis ay pumutok sa pinakalabas na gabay. Pagdaragdag ng mga istiloLayer Style > Pattern Overlay, gamit ang texture

Ang Photoshop ay isang napaka-tanyag na programa sa mga web designer, kahit na isang pamantayan para sa marami. At pagdating sa layout ng website, sa karamihan ng mga kaso, nangangahulugan ito ng .PSD file.

Bago direktang lumikha ng layout, kailangan mong magpasya sa istraktura ng site, mag-isip sa pamamagitan ng nabigasyon, at isipin kung saan matatagpuan ang mga bloke at elemento.

Ano ang binubuo ng layout?

Ang karamihan sa mga web page ay binubuo ng:

• Ang itaas na bahagi (header), kung saan ang logo, slogan, menu ng nabigasyon atbp.;
• ang pangunahing bloke kung saan inilalagay ang nilalaman;
• sidebar (sidebar);
• ang ibabang bahagi (footer), na karaniwang nag-iimbak ng mga sumusuportang impormasyon, impormasyon sa copyright, kapaki-pakinabang na mga link atbp.

Paano lumikha?

Bumuo at isipin ang istraktura. Hindi masakit na iguhit ito sa isang piraso ng papel o sa Photoshop mismo.

Mangyaring tandaan scheme ng kulay- dapat na pinagsama ang mga tono at tumutugma sa tema at direksyon ng site. Ang teksto ay dapat na madaling basahin at ang mga pahina ay dapat mag-load nang mabilis. Huwag mag-overboard sa mga dekorasyon, interactive na elemento at magarbong mga font - ang kaginhawahan ay mas mahalaga kaysa sa marangya na disenyo, dahil ang mga user ay bumibisita sa mga site na hindi para tumingala sa mga ito, ngunit may paunang natukoy na layunin, at kung mas mabilis itong malutas ng iyong mapagkukunan, mas ito. ay pinahahalagahan.

Magpasya kung ang iyong disenyo ay magiging stretchable o maayos. Sample nakapirming laki Ang hitsura nito ay pareho sa lahat ng mga screen, ngunit ang "goma" na isa, na nagbabago sa laki nito, ay umaangkop sa device. Kung ang disenyo ay "goma", kailangan mong magpasya kung ano ang pupunuin ang background ng site.

Gayunpaman, ginawa namin ang layout ng web resource na ito sa, na bahagi ng (Lubos kong inirerekomenda), at kumplikadong halimbawa maaari mong mahanap sa loob nito.

Dito, upang hindi makagambala sa mga detalye at paggamit ng mga napag-aralan na tool, isasaalang-alang ko ang isang kondisyon na halimbawa ng isang layout, isang template diagram, ngunit gamit ang inilarawan na algorithm madali kang magtrabaho sa iyong sariling layout.

1. Lumikha ng isang dokumento para sa layout sa hinaharap. Huwag kalimutang sukatin.
2. Limitahan ang layout gamit ang mga gabay na iginuhit mula sa mga pinuno.

Upang paganahin ang mga ruler, pindutin ang key na kumbinasyon Ctrl+R, o isagawa ang command na View -> Rulers ng main menu ng program.

Upang mag-drag palabas ng pahalang na gabay, mag-click sa tuktok na ruler gamit ang pindutan ng mouse at, nang hindi ito binibitawan, ilipat ang pointer pababa hanggang sa maabot ng gabay. gustong posisyon. Para bumunot patayong linya, gawin ang parehong bagay, ilipat lamang ang pointer sa kanan ng ruler sa kaliwa.

Bilang isang resulta, ang iyong template ay dapat na demarcated.

1. Iguhit ang layout. Magdagdag ng mga graphics, linya, mga pindutan at iba pang mga elemento. Ang lahat dito ay indibidwal, at tiningnan namin ang mga tool para sa trabaho sa kabuuan.

1. Magdagdag ng ilang kulay kung hindi mo pa nagagawa. Alalahanin ang pagkakaisa at lambot ng mga tono. Ang kaalaman sa pakikipag-ugnayan ng tao-machine at art school ay magiging isang plus lamang.

Paano mag-cut

na tapos na layout kinakailangang i-cut ito "sa mga piraso" upang magamit ang mga elemento nito sa disenyo ng site, ang bahagi nito ay ipapatupad sa pamamagitan ng HTML, bahagi sa pamamagitan ng CSS, at bahagi sa mismong mga larawan kung saan puputulin ang layout. Tandaan ito kapag gusto mong mag-iwan ng ilang larawan na may puting background, teksto ng pahina o mga pangalan ng link - kailangan mong iwanan lamang kung ano ang kukunin mula sa mga graphic na file at hindi ipapatupad sa ibang paraan.

Kaya, handa at bukas ang layout. Puputulin natin.

1. I-off ang mga layer gamit ang mga hindi kinakailangang elemento layout - teksto, mga pindutan, mga form, atbp. Upang itago ang isang layer, mag-click sa mata sa linya nito.

1. Ayusin ang mga gabay na iginuhit mula sa mga pinuno sa mga elemento ng istruktura site. Sa prinsipyo, ang layout ay maaaring i-cut kasama ang mga ito, ngunit sa kasong ito ay maaaring hindi ito lumabas nang eksakto kung kinakailangan, kaya gagamit kami ng isa pang tool.
2. Piliin ang Nesting tool. Ito ay matatagpuan sa palette sa pangkat ng Frame.

1. Upang i-cut ang isang piraso ng iyong disenyo, ilipat ang iyong pointer sa kung saan mo gustong magsimula at kumilos na parang pumipili ka ng isang hugis-parihaba na lugar. Ang hiwa na bahagi ay mabibilang. Asul Ang mga numero ay nangangahulugan na ang fragment ay aktibo at maaaring i-edit. Ang mga bahagi na inaasahan ng programa na iyong puputulin ay binibilangan kulay abong background. Ang cut fragment ay naka-highlight at may mga marker, salamat sa kung saan ang laki at posisyon nito ay maaaring iakma.

1. Gawin ang susunod na hiwa sa parehong paraan, at iba pa hanggang sa makumpleto ang trabaho.
2. Kapag tapos na ang lahat, i-save ang resulta. Upang gawin ito, patakbuhin ang command na File -> I-export -> I-save para sa Web ( lumang bersyon), suriin ang mga setting (piliin ang format, kalidad, atbp.), i-click ang I-save at tukuyin ang folder kung saan malilikha ang katalogo ng mga graphic na file.

1. Sa loob ng napiling direktoryo, may lalabas na folder ng mga imahe na may mga graphic na file, bawat isa ay naglalaman ng isang bahagi ng layout.
2. Maaari mo na ngayong i-save ang mga button, icon at iba pang dating nakatagong elemento.

Ang layout ay nilikha, gupitin at ganap na handa.