Сглобяване и анимиране

Фотошоп FastWeb Курсът показва как да използваме Photoshop, за да създаваме скоростно качествен уеб дизайн и как да обработваме изображения с Photoshop според целите ни.

Безплатни 20 урока
регистрирай се и научи

Ако сте вече потребител - Регистриран съм
Видео
Назад Алтернативен видео плеър
¿ Напред
Готови сме да преминем към привързването на тези html файлове.
 Имам много файлове, няма ги отварям с notepad, т.
к.
няма да ги виждам добре и мога да се объркам.
 Първо ще преименувам този на index, понеже в него ще сложа всичко.
 Ще ги отворя в текстовият едитор.
 Това тук е това, което направихме преди малко.
 Искам всичките тези файлове, идващи от Photoshop, да ги вкарам в един.
 Взимам този div.
 Взимам даже и коментарите.
 Ще препиша и тези коментари.
 Този знак обозначава, че там свършва "ME".
 Tук се виждат вече по-прегледно.
 Menu.
 Menu Open.
 Накрая "work".
 Слагам ID-та, за да мога да ги адресирам със скрипт.
 ID me, ID Menu.
Всичко изписвам с малки букви, т.
к.
има значение дали е с големи или с малки.
 ID Menu Open.
 Не могат да се слагат и разстояния.
 ID Work.
 Да видим.
Какво се получи!? Точно както трябва всичко е едно върху друго.
 Искам да ги центрирам затова ще сложа още един div.
 911 пиксела, което идва от тук.
 В края на страницата ще го затворя този div.
 Не се получи, както трябва.
 Грешката идва от това, че съм объркал номера и съм сложил Width който е по-малък от реалния.
 Всъщност съм взел height, вместо width.
 Сега ще сложа истинският width.
 и вече отиде в центъра.
 Ще скрия всички неща, освен менюто, което се показва първо.
 Това ще го направя с "display none".
 Ще го копирам навсякъде.
 "Menu", тук съм го сложил по погрешка.
 Ще взема скрипта, който направихме предишния урок.
 Копирам всичко.
 Ще го сложа след Head.
 Сега искам когато някой отиде върху този play елемент, първо да го намеря, Menu Ще го преместя това отгоре, защото логическо то е първо.
 Menu 03, ID.
 Не може да е със същото име като горното затова ще го кръстя, "menu play".
 Тези ще ги премахна.
 Сега ще задам едно правило "menu play".
 Click.
 Или по-скоро, Over.
 Това може да го видите към файл, който е прикачен към урока.
 Ако искате да го използвате, не е нужно да знаете какво правят всички тези неща.
 Бях написал само "over", коeто беше грешка.
 "Hover" e правилното.
 Сега го записвам да видим какво се получава.
 Клик отново.
 Всъщност точно това искахме да получим.
 Искам да разбера какво е името на елемента "about.
me".
 Menu open 07.
 Мога да го намеря тук.
 Логически това също ще е отгоре.
 Ще го наименовам, "mebutton".
 на ".
mebutton".
 Когато някой го натисне, ще изпълни следното: Това което нарекохме ".
me", ще влезне в екрана.
 Стана перфектно.
 Сега ще намерим и "work".
 "menuopen 03" Слагам му ID, за да мога да го адресирам от тук.
 Пиша абсолютно същия скрипт.
 ".
workbutton" "Hover", което означава да се изпълни, когато мишката отиде върху него, да изпълни тази функция.
 work fade in Да видим на този етап какво се получи.
 Показва се това.
 Тук не се показва нищо.
 Първо понеже "about me.
" е на слоя отгоре.
 В момента мишката, която е преместена, не достига до долния слой за да покажа на скрипта че е върху него.
 Затова това меню тук трябва да е най-отгоре.
 menu open.
 z-index 100.
 Да видим какво ще стане.
 "about" me и "work".
Оправи се.
 Сега менюто е над всичко.
 Другият проблем е, че двете неща се застъпват и about me не се скрива.
 Затова трябва да отида, отново в скрипта.
 и тук където се показва work да изчезва me, т.
e.
ако слагаме fade out.
 А където се показва "me" да изчезва "work", ако има такъв.
 Нека да видим какво ще се получи.
 Начало, mouse over.
 Страницата е готова.
 За 40 минути успяхме да си направим.
 Кретивна страница с интересен дизайн.
 Без абсолютно никаква информация, но поне е интересна.
 Надявам се този урок да ви е харесал.
 Файловете може да ги свалите отляво на видеото.

Въпроси и отговори

  • Daniela:

    От къде може да препишем тези последните правила, които въвеждате за бутона Play ? Има само PSD файл още в началото на този модул....

    Веселин:

    Сложихме го в първия урок от модула. Нарича се 'Архив'

  • Защо страницата ми стана много голяма?

    Галина Караджова:

    Следвам всички стъпки! Дори понякога сляпо без да разбирам точно какво правим ( в частта със сглобяването)! Страницата ми стана много голяма и когато я отворя с ГугълХром не я виждам изцяло, а имам плъзгачи! Какво сгреших?

    Ангел Арънски:

    Трябва да внимаваш резолюцията на файла да не е прекалено голяма. В урока съм използвал дължина (width) приблизително 1300px и височина 800px.


    Когато отвориш страницата в броузър тя изглежда по същия начин както във Фотошоп, когато zoom е 100%.

    Можеш да поправиш това като отидеш в меню Image/Image Size и намалиш размера на photoshop файла. След това ще трябва да използваш Export for Web отново.
    Галина Караджова:

    Благодаря! :)


    Румен Борисов:

    Не се чете хубаво скриптовете. Може ли да се напишат в коментарите?

    Румен Борисов:

    Ами под урока за да е по-разбираемо, според мен

    Ангел Арънски:

    @Румен, script-овете ги има в архивите прикачени към урока. Ако не в урока който гледаш, то в предния или следващия

  • Защо обектите не изчезват при отместване на мишката както е във видеото? В "архива" също не изчезват.

    инж. Юлия Петрова Савова:

    Photoshop CS6

    Веселин Аула:

    И във видеото не изчезват. Просто се натиска F5 за обновяване на страницата. Ако изчезваха при излизане на мишката от бутона, то нямаше да може да се натисне на потенциални връзки вътре в самата страница. 

    Възможно е да се направи да изчезват, ако има нещо важно на главната страница. Като например, да се направи сребърния кръгъл бутон да прави това, обаче няма да е добро решение в случая, тъй като мишката ще трябва да заобикаля, за да не премине през друг бутон.
    инж. Юлия Петрова Савова:

    Благодаря за отговора.


  • Как се определя числото 100, когато пишем     z-index:100   за да сложим menu_open  най - отгоре, защото при мен не се показва. В архива също не се показва.

    инж. Юлия Петрова Савова:

    Photoshop CS6

    инж. Юлия Петрова Савова:

    Как се определя числото 100 и защо, когато мине мишката над work нищо не се случва? 

    Ангел Арънски:

    Z-index, това си го представи като номер на слоя. Като най-долния слой е 0, а най-горния 2147483647. Всеки слой се поставя над този с по-малко число и под този с по-голямо. Така можеш да управляваш визуализацията на различни елементи които се застъпват.


    Другата част от въпроса не я разбирам, при мен в архива всичко си е наред в Chrome, IE и Firefox. На някое старо IE може и да не работи както трябва.
    Принципно 'menuopen' се показва когато отидеш върху затворената версия на менюто. Тогава слага отвореното над него.
    инж. Юлия Петрова Савова:

    Изтеглих си наново Архива и проработи. Благодаря.


  • Защо export-а ми от Photoshop произвежда странен HTML

    Elena Kocheva:

    Здравейте! 

    На мен не ми се получиха нещата при сглобяването. В долу показаните снимки се вижда че вместо div-вове имам таблици и колони и редове. Напълно се обърках когато трябваше да слагаме id в div-вовете защото аз нямам div. Другият проблем е че като натисна на index.html, за да ми се отвори сайта в браузъра се показват само частични картини. 

    Elena Kocheva:

    Когато натисна върху me.html нищо не се показва

    Ангел Арънски:

    В настройките при експорт във Photoshop трябва да бъде избран формата с DIV а не TABLES. Показано е в уроците за slice и export.

  • Защо след като правя всичко

    Теодора Симова:

    За 7 ми път гледам и двата урока преписвам дословно всичко от вас и ми се получава следното мазало

    каквото и да правя не се получава

    Ангел Арънски:

    За съжаление нищо не се разбира от така зададените въпроси по тази тема. Пробвай да изтриеш фона и да сложиш нов. Този който ползваш изглежда като да е има някаква прозрачност, която става бяла.

    Теодора Симова:

    аз го управих някак :)

    Теодора Симова:

    *оправих !

  • Защо ми излиза тази бяла черта ? Следвам стъпка по стъпка урока и немога да направя това с менюто , успявам да стигна до това положение за съжаление и не помръдвам повече . 

    Теодора Симова:

    Мария Балева:

    Здравей, можеш ли да прикачиш принтскрийн на проблема, така че да видим слоевете и се опитаме да ти помогнем :)

    Теодора Симова:

    проблемът го реших :)

  • Може ли да се пропуска елемент, за да работят бутоните под него.

    Алекс:

    направих всичко, но малко по-сложно реших. При мен MENUOPEN не може да се изреже по MENUPLAY, защото второто е по-сложна фигура с градиент. И MENUPLAY се скрива като сложа Index:100. Искам да питам има ли начин да направя достъпен слоя с бутони без да изрязвам по МЕNUPLAY...

    Боян Владиславов Соколов:

    Не може

    Ангел Арънски:

    Сложи това ново CSS свойство на елемент който искаш да бъде пропуснат и да работят бутоните под него. pointer-events: none; Но ако menuopen ти трябва да работи с мишката, то няма да сработи точно така. Може би ще стане, ако променяш pointer-events с javascript, само когато искаш да пропуска и да го махаш когато трябва да не пропуска.

Напред