Метод-лесен и бърз

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

Ако сте вече потребител - Регистриран съм
Видео
Най-бързият и най-лесен начин за превръщането на този psd файл в web страница e следния: Първо кропване, така изрязваме всичко, което не ни трябва Затова ще ресетна Crop инструмента Първо ще поставя guide линии, които да обхващат сянката и да са еднакви от двете страни.
След което ще приложа Crop.
Сега няма да имаме ненужно бяло отстрани.
Следвщата стъпка е да поставя хоризонтални guide линии, който да не са прекалено нагъсто.
Какво виждате това става като придърпвам горният рулер По този начин се създават guide линиите, ако нямате такъв ролер, той е скрит с клавишната комбинация Ctrl + R.
С Ctrl + R отново може да го пуснете.
Сега ще премахна тези вертикални guide линии, понеже те ни служиха само за форматиране.
Ще избера Slice tool, за да започна да изрязва различните части.
Например това ще ми е Header-a.
Ще направя Zoom.
Сега ако се опитвам да придърпвам оттук.
Ще премествам горната линия, затова ще придърпвам отдолу за да създам новият slice.
Ще маркирам трите бутона.
Ще му сложа url адреси.
Това значи че този файл "service html" трябва да е в същата директория, където е текущата страница.
Логото по принцип трябва да сочи към главната страница, Затова горният Slice, ще го преместя така.
И тук ще изрежа отново.
Тук ще изпиша наклонена черта.
Или по-скоро за да работи навсякъде записвам "index.
html".
Продължавам да изрязвам, частите, които ни трябват.
Попринцип, като изрежа оттук така, то ще създаде Slice, по средата автоматично.
Може да не го правя.
Тук ще е хубаво да сложа един слайд по средата на средния за да не ги направи всичките на една картинка.
Тук ще сложа Footer.
Следващата стъпка е да избера Save for Web & Device.
Първо ще селектирам абсолютно всичко, от началото до края.
Ще избера Jpeg High.
400K e абсолютно приемлива за една страница.
Ето виждате кагато са заградени всичките, ни показва тук, колко е размера.
На повечето страници 200k е само скрипта.
Tака че нямате никакъв проблем с 450 kB.
Където искам да имам по-голямо качество.
Например в логото, може да го вдигна на Very High.
Тук също мога да задам Very High.
Сега вдигнах с 10-20 kB.
На тези тук, мого да се опитам да им сложа GIF компресия.
По този начин обаче ще се различават от долното.
Освен това има градиенти в цялата лента.
Ще си го оставя на JPEG.
Когато искам да запазя, избирам html and images.
Тук давам other.
В slices избирам generate, css, inline.
След което избирам ОК.
Избирам името на моята страница.
И избирам Save.
Сега Фотошоп регенерира тези файлове.
Вътре са картинките.
Ето и html-a.
Ще го отворя с Notepad.
за да видим какво има вътре.
Почти нищо не се разбира, от това което се вижда.
Искам да го центрирам.
Затова първият div отиваме и даваме relative margin:auto; След което трябва да намерим hexa на background цвета.
Мога да го намеря тук.
Може да не е абсолютно бяло.
Моят е абсолютно бял,
и ще го сложа тук.
Ще ви покажа този цвят, откъде се вижда, когато го отворя в color pick.
Това е hexa цвета.
Виждате променя се тук.
Избрах F5 за Refresh.
Страницата е готова и е 500k.
Тези бутони тук работят и водят към страниците, които в момента ги нямаме.
Това е възможно най-лесния начин, за задаването на тази страница.

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

  • Daniela:

    Много интересен урок :) Сега да попитам естествено....Направили сме си заглавната страница,както в урока....И като цъкнем на контакти в случая нищо не ни излиза,защото няма какво.Но ако трябва да направим цялостен сайт,така че всичко да е активно и да излиза когато цъкнем на Контакти примерно, методиката същата ли е ? Т.е правим си нов дизайн на конретната страница(както в урока на заглавната страница на сайта)-в случая каквато страница трябва да се покаже когато цъкнем на Контакти....след това кропваме,нарязваме,сейфаме,после това с HTML-a и така всяка страница в нов фотошопски документ и цялата процедура се повтаря за всички отделни страници,за да бъдат активни ???Или начина е друг?Защото това в урока изглежда лесно,но не знам дали бих могла да се справя,ако искам примерно за себе си да си направя сайт сама с мой личен дизайн.............И това с тези URL адреси много не ми стана ясно кога какво пишем,да на Контакти - contact.html , но за цялостен сайт едва ли ще знам за все активен бутон какво да пиша. А за логото какво значи index.html когато го въвеждаме?

    Daniela:

    file:///D:/Documents/PS%20course/sait/photo.html

    Daniela:

    това се получи при мен. малко изрязано стои, при мен май не се налага това със смяната на цветовете ?

    Daniela:

    малко едрее цялата страница,но не мога да преценя с колко пункта да работя. Колко е допустимо на заглавните изречения и на основния текст ?

    Ангел Арънски:
    1. Принципно, ако искаш целия ти сайт да е направен с този метод, да, ще трябва всяка страница да я направиш по този начин. Което може и да не е толкова бавно колкото звучи, ако си подготвиш шаблон и елементи които да преизползваш.
    2. index.html е файла който уеб сървъра търси, когато адреса ти е без име на файл. Тоест, http://mysite.com е същото като http://mysite.com/index.html
    3. Когато слагаш връзки към някоя страница, ако тя е в същата директория където е и страницата в която искаш да сложиш връзката. То можеш да напишеш просто Страница и връзката ти ще работи. Не ти трябват 'абсолютни' пътища от сорта на този който си дала горе.
    4. Направи страницата си към 790 пиксела широка, след това размера на заглавията си ги избери на око. Няма как да ти кажа колко 'pt' да са, това зависи от DPI-а на файла ти. Можеш да видиш информация за размерните единици тук: http://photokie.com/kakwo-e-pt-px-i-em/
    Ангел Арънски:

    Както можеш да видиш малко информация за това колко голяма да е страницата ти тук: http://photokie.com/rezoluci/ Тоест ако си готова да преглътнеш 1% останали потребители на 800x600, можеш да направиш страницата си с дължина 950 пиксела например, която ще попадне в 1024x768

    Venko Stoev:

    Въведох корекциите за центриране и цвят точно като теб, но нещо не ми се получи и си остана същото (нецентрирано)

    Диляна Кънева:

    Venko Stoev, натисна ли "save" на notepad-a? И след запазването даваш "F5" и всичко трябва да се обнови. Открих и друг проблем, съвсем случайно. Когато въвеждаш корекциите трябва да добавиш и този знак " ; " иначе няма да ти отчете корекцията и ще си остане нецетрирано. Пробвах го, без него не се центрира

    Диляна Кънева:

    след...margine: auto; ......

    Дани:

    По въпроса с "едреенето" на страницата - и на мен не ми хареса как стои в браузъра, затова при Save for Web намалих Image Size на 75% и вече не се налага да превъртам 5 екрана, за да стигна до дъното на страницата :) 

  • Защо имам различни команди в текстовия файл?

    Маринела Тенева:

    Здравейте. Направих си всичко, както е описано във видеото, но когато стигнах момента за въвеждане на корекции по позицията, установих, че командите ми се различават от тези във видеото. Посочете ми, ако може къде е коректно да поставя командите за позиция. Благодаря!

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

    Погледни видеото 06:50. Показано е как се настройват опциите за записване на файл. Трябва да се избере опцията създаваща <DIV> елементи, а не стандартната таблица с <TR><TD>

    Маринела Тенева:

    Благодаря, много!

    Ivan Pukov:

    Ако ще се занимаваш с web или какво и да било друго програмиране ти препоръчвам да не използваш вградения в Windows Notepad - има много безплатни алтернативи ( atom , notepad++ , notepad 2 , sublime и т.н ) и платени - с тяхна помощ такива грешки ще виждаш много по-бързо и ще се ориентираш в кода по-добре :)

  • Как да махна бялата рамка (anti-aliasing) от GIF?

    Kaloyan:

    Здравейте,
    Когато изрязвам картинките ги задавам да са gif и задавам "No Transparecny Dither", за да не ми излизат с бял фон отзад. Но остава една бяла рамка около тях. Реших, че е от ефектите,които слагам и за това реших да направя една проста фигурка и да видя какво ще стане. Направих си HTML файл с избран фон и сложих фигурката, която изрязах. Пак се появи рамката.  Някой може ли да сподели как по - точно да ги изрязвам. 
    Благодаря.

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

    Използвай PNG, там има различна степен на прозрачност в пикселите. GIF има единствено една степен - прозрачно или не. Така единствения начин да направиш anti-aliasing е с използването на 'matte' цвят. Той ще се използва в anti-aliasing-а. Ако държиш да ползваш GIF, то трябва да си сигурен във фоновия цвят върху който ще поставиш GIF-а и ще трябва да го зададеш като 'matte' от Save For Web панела. 

    За последно използвах GIF преди 6-7 години, сега вече няма особен смисъл и PNG се е наложил като стандарт. GIF-а единствено се използва в много специални случаи, например когато имаме анимация
    Kaloyan:

    Благодаря! Тази сутрин и аз се сетих, че по стандарт е най - добре да е PNG.

  • Как да направя Guide линии

    Даниела Филипова:

    Как да направя тези Guide линии? Къде натискате, за да се покажат хоризонталните и вертикалните линии, които са до лентата с инструментите и чрез които правим Guide линиите?

    Даниела Филипова:

    Разбрах от къде да изкарам рулера с CTRL+R при мен е бил скрит. Благодаря Ви все пак.

  • Как да изрязвам по детайлно със slice tool ?

    Александър:

    Искам да попитам, понеже направих бутоните на менюто под хедера в по различна форма (различна от правоъгълник), как мога да ги изрежа, така че да паснат идеално с формата на самия бутон...в случая да изрязвам по диагонал примерно....или ако реша бутона ми да е кръг примерно, по какъв метод става изрязването?

    Антон Иванов:

    Не мисля, че е нужно да усложняваш изрязването на отделните парчета, Сашо. Очертай си правоъгълник, вписан в бутона и това е напълно достатъчно за линк или скрипт. 


    Александър:

    Да, при следващите уроци ми се изясни как точно работи инструмента и по какъв начин мога да направя по разчупен ефект за ховър.... след което разбрах, че въпроса ми е бил излишен ;))) Благодаря за отговора ;))

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

    както и в пада ми излиза това :/

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

    Оправих си всичко благодаря . Ще се радвам да ми дадете имейла Ви за да оцените моята работа

    Ангел Ангелов:

    Искам да ти кажа, че "това", което ти излиза е перфектна текстура! ;-)

  • Как да центрирам изображението?

    Simeon:

    Написал съм всичко както е във видеото, зададох му команда "save", след това на страницата F5 и пак не се получава.

    Валентин:

    Струва ми се, че си допуснал техническа грешка в бързината. Пробвай да промениш position:realtive с position:relative и мисля, че ще постигнеш желаният ефект.

  • Къде се правят промените за МАС?

    Невена Колева:

    Здравейте, Работян на Мак, Промените къде се правят? понеже тук няма Notepad. или не откривам... Направих ги с десен бутон на страницата в Inspect Elements и стана, но не знам от къде да запазя промените, и при затваряне всичко се връща по старому. Някой може ли да помогне?

  • Росица Кузманова:

    Tестовете баха в първи и втори модул.