Окуу куралы: Adobe Photoshop программасы менен веб баракчаны кантип жайгаштыруу керек

MODEL-PHOTOSHOP

Веб-баракчаларды иштеп чыгуу жана кодду киргизбей же тийбестен жөнөкөй жана функционалдык ыкма менен иштөө үчүн ар кандай шаймандар бар. Алар колдонмолор тарабынан сунушталган сансыз (Текшерүү комиссиясы мисалы болуп саналат) же түздөн-түз Wix сыяктуу онлайн платформалар аркылуу. Бирок, веб-дизайнер үчүн колдонмонун жол-жоболорун билүү өтө маанилүү. HTML5 жана CSS веб-сайттардын жана конуу барактарынын жайгашуусу үчүн негизги тирөөч болуп саналат.

Бирок, сиз күткөндөн көп учурда, Indesign же сыяктуу тиркемелерге кайрылууга туура келет Adobe Photoshop сиздин макет ишин толуктоо жана аларга кемчиликсиз бир бүтүрүү берүү. Бүгүн биз Adobe Photoshop программасын колдонуп веб баракчаны кантип жайгаштыра алаарыбызды ушул кенен окуу куралы аркылуу көрөбүз. Бул биринчи бөлүктө биз Photoshop программасында иштелип чыккан жумушта кала беребиз, бирок кийинки бөлүп-бөлүп, аны иштеши үчүн HTML кодун түздөн-түз колдоно аларыбызды көрөбүз.

Биздин сим-раманын дизайнынан баштасак

Веб баракчанын жайгашуусунан жана дизайнынан баштоо үчүн, бул негизги элементтер кандай болоорун аныктоодон баштоо абдан маанилүү, бул скелет. Бул түзүм бардык тексттерди (тексттик же мультимедиалык) сактоого жардам берет. Биздин баракчаны түзгөн бөлүмдөрдүн ар бирин аныктоо менен, биз алардын үстүнөн толук тактык менен иштеп, мүмкүн болушунча так визуалдык дизайнды камсыздай алабыз.

Эгер ал бар болсо, биздин веб-сайттын өлчөмдөрүн эске алышыбыз абдан маанилүү кутуча же толук туурасы. Кутуча салынган веб баракча кичинекей контейнердин ичинде болот, ошондуктан анын айланасында боштук пайда болот. Тескерисинче, толук желе баракчаны чыгарган түзмөктүн бүт экранын ээлейт. Тигил же бул модалды тандоо стилистикалык суроолорго гана жооп берет, ошондой эле биз иштеп жаткан долбоордун муктаждыктарына жараша болот. Биз бул мисалда браузер берген бардык мейкиндикти ээлебеши үчүн, кутуча режими менен иштейбиз.

 

Wireframe-1

Вирфреймди түзүү үчүн биринчи кезекте Adobe Photoshop тиркемесине кирип, биздин баракчага керектүү өлчөмдөрдү камтыйбыз. Бул мисалда биздин баракча 1280 пикселди түзөт. Бирок, көлөмдүн чыгышы акыркы көздөгөн жайга же биздин баракчабызды көбөйтүүнү каалаган түзмөккө жараша өзгөрүшү мүмкүн. Веб-дизайн иштей турган жана натыйжалуу болушу үчүн, сөзсүз түрдө болушу керек сезгич жана ал рыноктогу бардык шаймандарга ылайыкташы керек. Бирок, бул учурда биз рабочий компьютерде көбөйтүп жаткан прототипти түзүү үчүн иштейбиз. Ошого карабастан, жооптуу маселе кийинчерээк талкууланат, азырынча бул мисалда иштөө үчүн экран өлчөмдөрүнүн иерархиясы келтирилген. Бул учурда Adobe Photoshop программасында конуу барагынын макетин түзүп, андан кийин HTML5 ЖАНА CSS3кө көчүрөбүз. Бул кичинекей тажрыйбанын максаты - Photoshop программасында түзүлгөн дизайнды колдонуучунун кыймылына жооп бере турган колдонуучу жана интерактивдүү веб-дизайнга айландыруу.

Уюлдук телефондор үчүн өлчөө

iPhone 4 жана 4S: 320 x 480

iPhone 5 жана 5S: 320 x 568

iPhone 6: 375 x 667

iPhone 6+: 414 x 736

Nexus 4: 384 x 598

Nexus 5: 360 x 598

Galaxy S3, S4, S5: 360 x 640

HTC One: 360 x 640

Планшеттердин өлчөөсү

iPad бардык моделдери, ошондой эле iPad Mini: 1024 x 768

Galaxy Tab 2 жана 3 (7.0 дюйм): 600 x 1024

Galaxy Tab 2 жана 3 (10.1 дюйм): 800 x 1280

Nexus 7: 603 x 966

Nexus 10: 800 x 1280

Microsoft Surface W8 RT: 768 x 1366

Microsoft Surface W8 Pro: 720 x 1280

Стационардык компьютерлер үчүн өлчөө

Чакан экрандар (мисалы, нетбуктарда колдонулат): 1024 x 600

Орто экрандар: 1280 x 720/1280 x 800

Чоң экрандар: туурасы 1400 пикселден чоңураак, мисалы 1400 x 900 же 1600 x 1200.

 

wireframe-guides

Элементтерди бөлүштүрүп, веб-макетибизде бөлүмдөрдү бөлүп берүү үчүн, пропорцияны эске алып, окула турган жана обондуу бүтүрүшүбүз керек. Көрүү менюсунан таба турган эрежелердин жана колдонмолордун варианттарын колдонууңуз абдан маанилүү. Пропорционалдуу жана так ыкма менен иштөө үчүн эң жакшы пайыздык чендерден баштадык. Бөлүүнүн модалдуулугун тандоо үчүн биз көрүү менюсун, андан кийин «Жаңы колдонмо» опциясын чыкылдатабыз. Бул учурда биз 25% деңгээлинде төрт вертикалдык бөлүүнү жасайбыз жана аларды сүрөттөрүбүздү колонтитулга жана логотипибиздин сүрөтүн башына жайгаштыруу үчүн шилтеме катары кабыл алабыз.

Wireframe-1a

Биздин аймакты ээлей турган ар бир аймакты белгилөө үчүн код бар модель жана алардын ар бири ээ боло турган функция. Мисалы, сүрөттү ээлей турган аймакты көрсөтүү үчүн, кайчылаш түрү менен тик бурчтуктарды жасайбыз. Белгилүү бир аймакка видеолорду кошкубуз келерин билдирүү үчүн, контейнерибиздин ичине ойнотуу белгисин киргизебиз. Бул биринчи мисалда биз сүрөттөр менен гана иштейбиз, жогорку сүрөттө сиз ошол аймакты көрө аласыз логотип биздин сайттан.

Сым кадрлары-финал

Бул биздин акыркы натыйжабыз болмок каркас. Көрүнүп тургандай, ал логотип табыла турган жана эки баракчанын, издөө тутумунун жана издөө кутусундагы төрт баскычтын коштоосунда үй бетине шилтеме катары кызмат кылган сүрөттөн турган баш-бөлүккө бөлүнөт. Мындан тышкары, буга чейин дененин ичинде, биз бөлүүчү тилкеден турган каптал тилкесин жана вебсайтта боло турган мазмундун түрүн категориялаган бир катар категорияларды киргиздик. Биздин сайтта боло турган жазууларды камтыган дагы бир номерленген бөлүм, жана акырында, биздин сайттагы эң мета тегдер менен тизме.

Камтыган бөлүм менен аныктала турган мазмунун аймагында өзүн-өзү башкаруучу мазмун, биз макалаларыбыздын мазмунун таба алабыз. Бул учурда, күкүм же күкүм (анда биздин веб-сайттын органикалык түзүмү, макаланын аталышы, метадайындар, тексттин негизги бөлүгү болгон абзац, анын ичинде сүрөт камтылган.

Колонтитул катары биз баракчабыздын башка аймактарына шилтеме болуп бере турган төрт сүрөттү киргиздик. Бул жерге логотиптерди же башка кызыктуу бөлүмдөрдү киргизсек болот. Чындыгында болсо дагы, бул аймак дагы ошондой иш-аракет кылат prefooter, төмөнкү колонтитулдун өзү колдонуу саясаты, укуктук билдирүү жана автордук укук менен бир аз төмөндөйт.

Баракчабыздын негизги түзүлүшүн же скелетин аныктап алгандан кийин, кийинки баскычка өтүшүбүз керек. Бул биздин веб-сайтыбыздын ар бир багытынын туура дизайнынан турат. Башкача айтканда, биз веб-сайтыбызга акыры киргизиле турган мазмунун ушул тармактардын ар бирин "толтура" баштайбыз. Сым кадрлары менен иштөөдөн мурун, ушул элементтерди иштеп чыгууну баштабоо сунушталат, анткени, эгерде биз аны ушул тартипте жасасак, анда алардын пропорцияларын кийинчерээк өзгөртүшүбүз керек. Сүрөттөрүбүздү бузуп алуу коркунучу бар жана элементтердин ар биринин дизайнын жаңыртууга туура келет, бул убакытты текке кетирет же сапатынын төмөндүгүнө алып келет.

Бул учурда, биздин сайттын дизайны өтө жөнөкөй болот. Биз колдонобуз материалдык дизайн осуяттары, анткени Google практикасын өркүндөтүү үчүн логотипти колдонобуз. Бул сабактын максаты техникалык билимди чагылдыруу экендигин түшүндүрүп беришим керек, андыктан бул учурда эстетикалык натыйжа эч кандай мааниге ээ эмес. Көрүнүп тургандай, биз акырындап мейкиндикти мурун схемабызда аныктап алган бардык аймактар ​​менен толтуруп жатабыз. Бирок, акыркы мүнөттө кичине өзгөртүү киргиздик. Өзүңүз байкагандай, биз логотиптин көлөмүн бир кыйла кыскартып, төмөнкү менчик бөлүккө жогорку меню менен толук туташкан бөлүүчү сызык киргиздик. Бул учурда биз ресурстардын банкынан алынган баскычтарды жана материалдарды колдондук. Дизайнерлер катары биз аларды өзүбүзчө иштеп чыга алабыз (айрыкча, бул бренд сүрөтү же логотип сунуш кылган тоникке окшош тон келсе).

желе

Бул мисалды келтирүү үчүн эки башка деңгээлде иштей тургандыгыбызды эсибизден чыгарбашыбыз керек. Бир жагынан объектилердин үстүнөн иштесек, экинчи жагынан веб-сайттын сырткы көрүнүшү. Башкача айтканда, бир жагынан веб-сайтыбыздын скелетинде, экинчи жагынан бардыгы бул скелет колдой турган калкып турган элементтер. Такыр эле калкып калбай турган аймактар ​​бар экендигин байкайсыз, мисалы, биздин каптал тилкесибиз ээлей турган аянт, фри бут же бөлүкчөнү денеден бөлүп турган тилке.

web2

1, 2, 3 жана 4 структуралары маалымат биздин веб-баракчабыз, ошондуктан чындыгында Adobe Photoshop программасынан экспорттоо биз үчүн кажет болбой калат, бирок аны жасай алганыбыз менен, бул зарыл эмес. Кеп келгенде Жалпак түстөр (Жалпак дизайндын жана материалдык жасалгалоонун маанилүү белгилеринин бири, аларды CSS стилин колдонуп, код аркылуу кемчиликсиз колдонсо болот). Бирок, калган элементтер HTML кодубузга кийинчерээк киргизүү үчүн сакталышы керек. Бул кичинекей диаграммада биз баракчанын арт жагына тиешелүү жерлерди дагы чагылдырдык, ошондо сайтыбыздын акыркы көрүнүшү кандай болору жөнүндө так түшүнүккө ээ болдук.

Сиз билгендей, Adobe Photoshop программасында бул схеманы түзүүнүн мааниси ар бир элементтин чыныгы өлчөмүн алуу жана ар бир элементтин жайгашуусун жана түзүлүшүн тактоо болуп саналат. Албетте, процесстин ушул этабында тексттик мазмунуна орун жок, анткени ал болушу керек биздин код редакторунан берилет. Бул практикада биз баскычтар жана статикалык элементтер менен иштей тургандыгыбызды белгилей кетишибиз керек, бирок жалпысынан алар Bootstrap сыяктуу түздөн-түз же Jqueryден колдонулат.

Веб баракчабызды түзө турган элементтердин ар бирин жараткандан кийин, аларды экспорттоону жана HTML долбоор папкасында жайгашкан сүрөттөр папкасында сактоону баштоо керек. Вирфреймден экспорттоого көнүшүңүз абдан маанилүү, себеби скелет конфигурациясынын негизинде баштапкы элементтердин айрымдарын өзгөртүшүңүз керек. (Мисалы, бул учурда биз баштапкы баскычтардын, логотиптин көлөмүн жана композициянын бөлүгү болгон элементтердин көпчүлүгүн, анын ичинде төмөнкү аймакта жайгашкан сүрөттөрдү өзгөрттүк).

Кандайдыр бир нерсени өз алдынча сактап калууну үйрөнүшүбүз керек, аларды өзүлөрүнүн өлчөмдөрү менен жана так сактоодо. Кандай гана болбосун ката, веб-баракчаңыздын бардык элементтерине таасир этиши мүмкүн. Алар бири-бири менен тыгыз байланышта болоорун жана акыркы желедеги HTMLден киргизилиши үчүн кемчиликсиз өлчөмдөргө ээ болушу керектигин унутпаңыз. Бул учурда, биз төмөнкү элементтерди өз алдынча кесүү жана сактоо керек болот:

  • Биздин логотип.
  • Бардык баскычтар (негизги менюга киргендер жана калгандары).
  • Бардык сүрөттөр.

Биз муну ар кандай жолдор менен жасай алабыз, балким, сиз үчүн натыйжалуу альтернатива табасыз. Бирок сиз макеттин мындай түрүн биринчи жолу жасай турган болсоңуз, анда төмөнкү кеңештерге кулак кагууңузду сунуштайм.

  • Биринчиден, сизде биздин wireframe камтылган PSD файлы жайгашкан папкага барып, экспорттой турган элементтериңизден канча эсе көп болсо, ошону кайталаңыз. Бул учурда биз түп нускадан 12 нуска түзүп, ошол эле папкага сактап койдук. Андан кийин, көчүрмөлөрдүн ар биринин атын өзгөртүп, ар бирине курамындагы элементтин атын ыйгарасыз. Биздин 12 нусканын аталышы өзгөрүлөт: Лого, меню баскычы 1, меню баскычы 2, издөө тилкеси, жогорку баскыч 1, үстүңкү баскыч 2, жогорку баскыч 3 жана жогорку баскыч. Калган төрт аталыш: сүрөт 4, сүрөт 1, Сүрөт 2 жана Сүрөт 3.
  • Бул бүткөндөн кийин биз логотип аты менен файлды ачабыз.
  • Биздин катмар палитрасына барып, биздин логотип камтылган катмардын жайгашкан жерин табабыз. Андан кийин биз басабыз Ctrl / Cmd ал эми биз аталган катмардын эскизин басканда. Ошентип логотип автоматтык түрдө тандалып алынат.
  • Кийинки кадам Photoshopко ошол логотипти так кылып кесип салышын каалайбыз. Бул үчүн биз ачкычтан же буйруктан кыркуу куралын гана чакырышыбыз керек C.
  • Муну жасагандан кийин, кесилгенди ырастоо үчүн Enter баскычын чыкылдатабыз.
  • Эми биз сактоону басуу үчүн жогорудагы Файл менюсуна өтөбүз. Биз бул учурда «Лого» боло турган аталышты тандап алабыз жана анын форматын беребиз PNG, Интернетте эң жогорку сапатты сунуш кылган файл болгонуңуз үчүн.
  • Бардык көчүрмөлөрү жана элементтери менен процессти кайталайбыз. Кыркып бүткөндөн кийин, биздин палитрадагы калган катмарлардын болушун текшериңиз көрүнбөгөн же жок кылынган. Ошентип, биз ар бир элементти ачык фон менен сактай алабыз.

Button1

Бул учурда, меню баскычын 2 катмарлар палитрасынан тандап жатабыз. Биздин баскычтын чектери автоматтык түрдө кандайча тандалганын скриншоттон көрө аласыз.

button2

С баскычынан кыркуу куралын тандап алгандан кийин, биздин полотно биздин баскычтын өлчөмдөрүнө чейин гана кыскарат.

сактоо баскычы

Азыр биздин веб-сайтка кирген элементтердин бардыгын бир-бирден сактап, аларды сүрөттөр папкасына киргизип, кийин колдоно турган мезгил келди. Биз кодубуздан чалууларды жасайбыз жана макетибизди улантабыз, бирок мындан ары биздин код редакторунан.

Бул процессти толугу менен интуитивдүү кылган веб-баракчаны жайгаштырууга көптөгөн куралдар жана альтернатива бар болсо дагы, биз аны колдонмо. Ушундай жол менен веб-баракчанын жасалгаланышынын негиздери эмнеде экендигин билебиз.

на:

  1. Дизайн түзүлүш Берүүнү каалаган мазмунуңузга жана веб-сайтыңызда түзүшүңүз керек болгон бөлүктөргө өзгөчө көңүл бурган веб-сайттын.
  2. Скелетиңиздин үстүнөн иштөө же каркас Adobe Photoshop программасынан мазмунунун кайсы аймактарда пайда болорун жана алардын форматтарын көрсөтөт.
  3. Мурда иштеп чыккан чараларга жана бренддерге таянып, баштаңыз дизайн желе бети. Бардык элементтерди камтыйт (сүзүүчү жана туруктуу). Тиешелүү баскычтарды, логотипти жана сүрөттөрдү кошууну унутпаңыз.
  4. Долбоордун бир бөлүгү болгон бардык элементтерди бирден кесип алыңыз. Алардын туура чараларды көрүп, кийинчерээк сизге көйгөй жаратпасын текшерип алыңыз.
  5. Бардык элементтерди форматта сактаңыз PNG проект папкасынын ичиндеги сүрөттөр папкасында HTML.
  6. Бул долбоордун веб-терезеде чыгышы бар экендигин унутпаңыз, ошондуктан түстөр режимин эске алып, колдонушуңуз абдан маанилүү RGB.
  7. Жумушка орношо электе суктанган башка веб-баракчалардан илхам алыңыз жана бул жөнүндө командаңыздын мүчөлөрү менен талкуулоону унутпаңыз. Эгер бул кардар үчүн долбоор болсо, анда карманганга аракет кылыңыз маалыматтык чогулуш мүмкүн болушунча.

 


Макаланын мазмуну биздин принциптерге карманат редакциялык этика. Ката жөнүндө кабарлоо үчүн чыкылдатыңыз бул жерде.

2 комментарий, өзүңүздүкүн калтырыңыз

Комментарий калтырыңыз

Сиздин электрондук почта дареги жарыяланбайт. Милдеттүү талаалар менен белгиленет *

*

*

  1. Маалыматтар үчүн жооптуу: Мигель Анхель Гатан
  2. Маалыматтын максаты: СПАМды көзөмөлдөө, комментарийлерди башкаруу.
  3. Мыйзамдуулук: Сиздин макулдугуңуз
  4. Маалыматтарды берүү: Маалыматтар үчүнчү жактарга юридикалык милдеттенмелерден тышкары билдирилбейт.
  5. Маалыматтарды сактоо: Occentus Networks (ЕС) тарабынан уюштурулган маалыматтар базасы
  6. Укуктар: Каалаган убакта маалыматыңызды чектеп, калыбына келтирип жана жок кыла аласыз.

  1.   Piratesking Pirate King ал мындай деди:

    хахахахахаха жана ушулардын аягында сиз старт баскычына өтүп, жабдыктарды өчүрүп, сизди блять эмес вебсайт кылып турган адиске кайрыласыз;)

  2.   Ронни ал мындай деди:

    Окуу куралы мени жакшы мактайт, бирок кийинкисинде сиз аны кененирээк түшүндүрүп беришиңиз мүмкүн, мен дагы деле болсо ушул дизайндан баштайм жана акыркы натыйжасы бар сүрөттөрдү көргөндө кандай кадамдарды жасаарымды билбейм. Рахмат.