Дизајнирајте чист и елегантан изглед блога у Пхотосхопу ЦС6

У овом туториалу ћу вам показати процес прављење једноставног и чистог дизајнерског блога користећи најновији Пхотосхоп. Користићемо ново Стилови знакова и Стилови пасуса да нам помогне да поједноставимо процес.

Да бисте пратили овај водич, биће вам потребни следећи ресурси:

• Бесплатно Фонт Сансатион од Бернд Монтаг.
• 26 Поновљиви узорак пиксела из ПСДфреемиум.
• Бесплатне иконе друштвених медија од Даниеле Селвителла.

• Демо

Припрема платна

Корак 1

У овом дизајну користићемо оквир од 960 гс. Преузмите предложак са његове главне странице и унутар зип датотеке, потражите датотеку пхотосхоп. Отворите датотеку '12 грид колоне' у Пхотосхопу.

Кликните на икону ока за слој 12 Цол Грид да бисте га сакрили; за сада нам неће требати.

Корак 2

Тренутна величина платна је премала. Кликните Слика> Величина платна (или Цтрл + Алт + Ц). Додајте већу величину и водите рачуна да поставите тачку сидрења на средину.

Корак 3

Притисните Цтрл + Р да бисте открили равнало. Кликните Приказ> Ново Водич за израду новог водича који ће нам помоћи да прецизно дизајнирамо. Изаберите Вертикала и на позицији: 185 пк да направи вертикални водиц 185 пк од горњег левог угла платна.

Корак 4

Нацртајте други вертикални вод на позицији 150 пк, 1095 пк и 1130 пк.

Испод је наш коначни водич унутар платна.

Припрема теме боја

Корак 5

За овај дизајн користићемо лепу комбинацију боја из Цолорлоувер-а. Кликните на везу Превиев да бисте отворили комбинацију боја као јпег датотеку.

Сачувајте комбинацију боја и ставите је у Пхотосхоп датотеку. Постављањем слике директно у платно можемо брже и лакше пробати његову боју.

Припрема позадине

Корак 6

Изаберите Позадина слој и кликните на икону закључавања на врху плоче Слојеви да бисте је откључали. Двапут кликните на сличицу да бисте променили боју.

Кликните на другу боју, # 948371, да бисте је изабрали.

Корак 7

Нацртајте правоугаони облик на врху платна. Ово ће бити друга позадина.

Корак 8

Задржите изабрани облик. Ин тхе Опција Бар, опен Филл Боја и затим кликните на икона котача боја. Када се отвори оквир за дијалог Цолор Пицкер, кликните на прву боју да бисте је изабрали. За своје Удар цолор селецт Ниједан.

Корак 9

Направите нови слој и затим изаберите горње платно помоћу правоугаоне алатке. Активирај градиент тоол и попуните га радијално градиент од беле до црне. Уверите се да је градијент центриран на врху платна.

Цханге итс Мешавина моде до Екран и смањити Непрозирност до 37%.

Корак 10

Направите нови слој и назовите га "сенка".

Нацртајте правокутну селекцију на дну секундарне позадине као што је приказано. Кликните Едит: Филл. Комплет Усе до Црн. Кликните У реду да попуните селекцију црном бојом.

Корак 11

Омекшајте га користећи Гауссиан Блур. Кликните Филтер> Блур> Гауссиан Блур.

Корак 12

Држите Алт, а затим поставите курсор између схадов и горња позадина слој. Без отпуштања тастера Алт, кликните на претворите слој у Цлиппинг Маск. Претварањем у Цлиппинг Маск, сенка сада улази у горњу позадину.

Корак 13

Спустите сенку Непрозирност до 50% да буде суптилан. Испод можете видети резултат у увећању од 100%.

Корак 14

Увек је добра идеја ставити ове слојеве у једну групу. Да уради ово, изаберите све слојеве и кликните Цтрл + Г.

Заглавље

Корак 15

Нацртајте правоугаоник на горњем платну као што је приказано.

Корак 16

Ин тхе Опција Бар, комплет Удар цолор то # аф9ф8е.

Корак 17

За своје Филл боја, одаберите линеар градиент од # д0ц4б9 до # а89ц91.

Испод је резултат у 100% приказу.

Име сајта

Корак 18

Додајте име сајта на леву страну дизајна. Обратите пажњу на положај као што је приказано испод. Двапут кликните на текст и додајте Дроп Схадов. За свој фонт користите Сансатион.

Мени

Корак 19

Цртање менија са друге стране менија. Користите фонт Сансатион 14 пт. Опет, обратите пажњу на положаје.

Корак 20

За активни мени, подесите његов тип слова на болд.

Корак 21

Активирати Алат за полигоне и сет Сидес до 3. Нацртајте облик троугла Испуните: # 3д3123 и Ход: Нема. Додати Лаиер Стиле > Дроп Схадов.

Корак 22

Нагласимо активни мени додавањем линије испод ње. Активирај Линијски алат и одредити своју тежину 5 пк. Изаберите # ф76б6а за његово испуњење, без ударца.

Ставите линију десно испод активног менија и додајте 1 пк размак на дно менија.

Коришћење стилова знакова

Корак 23

Сачувајмо поставку карактера као стил карактера. Ова функција је поједностављена верзија стилова знакова у ИнДесигн-у. Да бисте је сачували, активирајте текст и кликните на икону 'Нови стил знакова'.

Двапут кликните на нови стил знакова и користите следеће поставке.

Корак 24

Изаберите други мени и кликните на стил знакова да бисте га применили. Ако пронађете знак плус поред знаковног стила, то значи да знак има другачију поставку. Да бисте поништили поставке, кликните на икону кружне стрелице.

Корак 25

Поновите претходни корак да бисте направили нови стил знакова за активни мени.

Корак 26

Дакле, која је сврха коришћења стилова знакова? Стилови знакова нам помажу да централизујемо подешавање карактера. Можемо једноставно уредити стил знакова да бисмо уредили сваки текст користећи тај стил. Погледајте пример испод. Ако уредимо тип фонта унутар знаковног стила Главни мени - Нормално до Цорбела, сви нормални мени се аутоматски мења у Цорбел.

Корак 27

Направите нови слој и поставите га испод менија. Цтрл-кликните на траку менија да бисте направили нови избор на основу његовог облика. Напуните га црн.

Корак 28

Уклоните избор помоћу Цтрл + Д. Ублажите га додавањем Гауссиан Блур, Филтер> Блур> Гауссиан Блур.

Клизач

Корак 29

Нацртајте правоугаони облик са ширином од 10 колона (погледајте доле).

За своје Попунити боју изаберите # дфд1ц2. За своје Удар изаберите # ц8баац са величином 10 пт. Кликните малу стрелицу падајућег менија поред прегледа линије и уверите се да је Алигн Инсиде је изабрано.

Корак 30

Залепите слику на врх оквира. Претвори у Цлиппинг Маск притиском на Цтрл + Алт + Г. Слика ће се аутоматски пребацити у оквир клизача. Ако је потребно, можете померати и мењати величину слике без утицаја на њен кадар.

Корак 31

Повуците још један правоугаони облик иза клизача исте боје. Обавезно га поставите на крајњи водич. Додати Стил слоја> Прекривање узорка користећи узорак пиксела из ПСДфреемиум. Тоне довн итс Непрозирност да направи њену суптилност.

Корак 32

Извуци правоугаони облик изнад облика са Попуните: # б3аца5 и но Строке. Притисните Цтрл + Т и онда ротирајте 45 °. Конвертујте облик слоја у Цлиппинг Маск.

Корак 33

Удвостручите облик и промените величину. Цханге итс Филл за тамнију боју. Конвертујте облик слоја у Цлиппинг Маск.

Корак 34

Поновите исти корак да бисте нацртали другу стрелицу на другој страни.

Корак 35

Цтрл-кликните слајд рам да бисте направили нови избор. Направите нови слој и претворите га у а Цлиппинг Маск. Испуните избор са црн.

Корак 36

Затим поништите избор (Цтрл + Д) омекшати то усинг Гауссиан Блур.

Ако је потребно, можете смањити непрозирност сенке.

Корак 37

Нацртајте заобљени правоугаоник на углу клизача Испуните # ц8баац.

Корак 38

Нацртајте круг унутар облика. Сет итс Удар до црн са величином 1 пт и уклоните Филл.

Корак 39

Изаберите круг патх усинг Селецтион Патх оруђе. Схифт + Алт-повуците путању да бисте га дуплицирали.

Поновите ово да бисте привукли више кругова.

Корак 40

Изаберите једну од кружница. Притисните Цтрл + Схифт + Ј да бисте га пресекли на нови слој.

Корак 41

Ин тхе Опција Бар, ремове итс Удар и промени своје Филл то а радијално градиент фром # е38989 то # бб5ц5ц. Додати Стил слоја> Оутер Глов и Дроп Схадов.

Корак 42

Нацртајте елиптичан избор испод клизача. Направите нови слој и попуните га црн.

Корак 43

Поништите избор (Цтрл + Д). Омекшајте га користећи Гауссиан Блур.

Ловер Бацкгроунд

Корак 44

Нацртајте други правоугаони облик за доњу позадину. Користите исто Филл и Удар боја као облик клизача.

Као и увек, будите веома опрезни са његовим постављањем. Желимо да покрије сваки водич на платну.

Додати Стил слоја> Прекривање узорка.

Испод је резултат у 100% увећању.

Корак 45

Изаберите његову горњу област помоћу алатке Рецтангулар Маркуее.

Корак 46

Направите нови слој, ставите га иза облика. Испуните избор са црн. Притисните Цтрл + Т, десни клик и изаберите Перспецтиве.

Повуците његове горње углове ка споља.

Поново кликните десним тастером и изаберите Скала. Повуците горњу ручицу према доље.

Десни клик и изаберите Варп. Повуците леви и десни сегмент ка унутра.

Омекшајте га користећи Гауссиан Блур.

Тоне довн Непрозирност до 20%.

Корак 47

Нацртајте бели ректангул у позадини. Ово ће бити позадина за главни садржај сајта.

Додајте размак од 10 пк на леву, десну и горњу страну позадине. Размак треба бити лак, јер смо направили водич у раним корацима. Додати Стил слоја> Оутер Глов.

Корак 48

Додајте нови водич, 25 пк са горње стране облика.

Титле Сецтион

Корак 49

Додајте нови стил знакова за наслов секције странице и његов опис.

Додајте наслов секције и њен опис помоћу алатке Тип. Примијените стилове које смо раније направили. Побрините се да додате 25 пк простора са горње стране позадине уз помоћ претходног водича.

Корак 50

Нацртајте 5 пк линију испод описа сајта са Попунити: # 938270 и Ход: Нема.

Блог пост

Корак 51

Направите други стил знакова за наслов поста.

Корак 52

Додајте наслов поста и примените претходни стил знакова.

Корак 53

Нацртајте правокутни облик испод наслова са 4 ширине колона. Комплет бео За своје Филл и #бебебе За своје Удар. Додати Лаиер Стиле> Строке.

Корак 54

Залепите слику на врх облика. Претвори га у маску за одсецање (Цтрл + Алт + Г).

Корак 55

Нацртајте заобљени правоугаоник са Попунити: # 8е8380 и Ход: Нема. Претвори у Цлиппинг Маск.

Корак 56

Направите нове стилове знакова за метаподатке блога.

Корак 57

Додајте текст метаподатака на врх облика и примените стил знакова који смо раније направили.

Корак 58

Активирати Тип и кликните и повуците да бисте направили текстуални оквир. Поставите његову ширину на 4 колоне. Кликните Тип> Пасте Лорем Ипсум да га попуни са ауто-генерисаним Лорем Ипсум из Пхотосхопа.

Корак 59

Направите нови стил пасуса за садржај знака. Кликните на нову икону на панелу Стилови пасуса.

Двапут кликните на стил пасуса и користите следећу поставку.

Корак 60

Примијените овај стил на садржај поста. Такође можете експериментисати са његовим подешавањем отиска и размака.

За веб дизајн, деактивирајте функцију Распоређивање.

Корак 61

Нацртајте заобљени правоугаоник са Попунити: # 8е8380 и Ход: Нема. Додати Стил слоја> Прекривање узорка. За конзистентност користите исти узорак као код клизача.

Корак 62

Додајте ознаку дугмета. Предлажем да га сачувате као стил карактера. На овај начин, можемо га лако користити за друге типке.

Корак 63

Претходно дугме је за нормално стање. Хајде да га дуплирамо и промијенимо боју на # ф76б6а. Такође, подесите њен тип ознаке на болд.

Корак 64

Поставите пост унутар групе и затим притисните Цтрл + Ј да бисте га дуплицирали. Алт-повуците да бисте дуплицирали групу.

Поновите исти корак да бисте направили још порука. Не заборавите да промените слику и наслов сваког поста.

Корак 65

Дуплицате Опширније и промените ознаку на број. Користићемо га за навигацију по страницама. Запамтите да поставите једно од дугмади на стање лебдјења.

Корак 66: Подножје

Почнимо да радимо на подножју. Додајте наслов виџета и његов опис.

Корак 67

Додајте везу и нацртајте 1 пк линију испод ње. Комплет Попуните: Нема и Ход: # 8е8380.

Корак 68

Кликните Више опција и изаберите испрекидана линија.

Корак 69

Додајте још веза у виџет.

Корак 70

Удвостручите виџет.

Корак 71

Такође морамо додати и стање лебдјења. Поставите један линк на болд.

Испод те активне везе додајте линију од 5 пк. Поставите боју на # ф76б6а. Због доследности, изглед ове везе је сличан активном менију на траци менија.

Корак 72

Додајте још један правоугаоник у доњи део. Сет итс Филл до # 3д3123.

Фоотер Информатион

Корак 73

Додај информације о подножју помоћу Тип оруђе. Дајте му мрак Дроп Схадов да бисте додали контраст његовој позадини.

Друштвена мрежа

Корак 74

Додајте неке иконе друштвених медија из Даниеле Селвителла. Додати Стил слоја> Оутер Глов.

Корак 75

Утишајте нормалну икону на 50%. За стање лебдења, хајде да га задржимо Непрозирност ат 100%.

Корак 76

Зграбите икону курсора слободне руке и поставите најмањи курсор изнад активне или лебдеће везе.

Крајњи резултат

Ово је наш коначни резултат. Видите да најновија верзија Пхотосхопа има неке интересантне могућности за креирање веб распореда. Стилови знакова и стилови пасуса представљају значајно побољшање за сваког веб дизајнера.

• Демо
• Довнлоад Соурце