Подготовка на background

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

Ако сте вече потребител - Регистриран съм
Видео
Нека да комбинираме някой от предните уроци и да направим нещо по-интересно и по-креативно.
В този файл съм си направил фон, който е с резолюция 3600 x 2000, и е съставен от смарт обекти.
Тези смарт обекти са слепени един до друг.
Във всеки смарт обект имаме това.
Имаме и това.
В първият фон съм сложил Blur noise.
На вторият добавих Motion blur noise.
Overlay с 28%.
След това имаме още различни видове Blur Noises.
Tук съм сложил един филтър.
След което съм ги подредил един след друг така, че да се връзват.
В момент се забелязват дефекти.
Говоря за тези точкови линии.
Те са само във Photoshop.
След експортирането, няма да ги има.
Ето виждате, няма ги.
Създадох го с висока резолюция за да има малки детайли и да наподобява на кожа.
След, което съм сложил тъмнина отгоре и светлина отдолу.
Ще задам Save for Web & Devices.
Избираме формат .
jpeg hight.
Tук слагам максималната революция, която до принципно екраните ползва.
Може би 1% от екраните имат тази резолюция - 2600, но аз искам да обхвана тези екрани.
Така този фон няма да свършва на техните екрани.
Размера е 500 kb, което е добре.
Избирам да е high.
Save като фон.
Отворям този файл.
Тук, на мястото на background color, ще сложа 000000.
Шест нули, което означава черен цвят.
Попринцип този фон, няма да се вижда.
След него ще сложа фоново изображение.
Не би трябва да се вижда, понеже фона ни, не трябва да свършва.
Взимам картинката от тук.
И я слагам на фона.
Изтривам тага с картинката.
Той вече не ми трябва, вече съм да съм сложил на фона.
Отварям страницата за да видя какво съм направил.
Картинката започва от горния ляв ъгъл.
Аз искам да е центрирана.
Затова тук ще сложа - background - position: center center, което значи хоризонтален център и вертикален център.
Избирам F5 за обновяване и ето вече се премести насам.
Виждате вече че, когато разтеглям екрана центъра на фона си остава в центъра на браузъра.

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

  • Daniela:

    Как започнах аз....Отворих си нов документ с размери : 3600/2000px и започнах да си правя background-a.След като направих всичко, изключих това което не ми трябва,за да остане само background-a и направих тази тази част от урока със сейфането на фона със Save for Web и там ми показва,че размера на файла е 2,678M......И файла ми е 3600/2000. СЛед това въведох стойностите 2600/1434 и файла се смали само до 1,437М и когато го сейфнах и отворих линка страницата на екрана беше огромна и за да я видя трябваше да мърдам скрола нагоре-надолу,наляво-надясно...................Явно не съм работила в правилните размери на страницата ли ? Но аз така чух в урока и си въведох тези размери :D И сега какво трябва да направя ? Като съм си построила вече и другите елементи...........

    Daniela:

    file:///D:/Documents/PS%20course/creative/background.html ето това се получи и когато въвеждам настройките от урока нищо не се получава,вероятно защото background-a ми е различен, но понеже нищо не разбирам от тези кодове и въвеждам на сляпо ..не знам какво трябва да оправя и да стане активен...Сега е огромен background-a....и каквито и настройки да задавам от зададените в урока нищо не става

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

    Фона е с такива размери, за да поддържа посетители който го отварят с екрани който имат висока резолюция. Принципно това което се случва в HTML е следното. Photoshop експортва целия фон и го слага като IMG - картинка. За това и виждаш scroll нагоре и встрани. За да избегнем това, слагам картинката като фон и указвам да е в центъра. style="background-image:url(....); background-position:center center;" Това са CSS правила който можеш да препишеш сега, по-късно ще ги разбереш, когато стигнем до уроците за CSS и Stylizer. Просто гледай да са правилно изписани. Една буква ако е грешна, то нищо няма да работи. Можеш да видиш как съм ги написал във файла и да ги вземеш от там.

    Daniela:

    Моят фон не е черен и не пиша 00000 за продължаване на фона нали ? А си оставям цифрите които са ми излезли в html-a ? Хахахахах, при мен пак не стана и ще ви направя видео, за да видите защо най-накрая не се получава и да оправим проблема.......защото работата е трагична :)

    Daniela:

    Последното, което направих е ( не знам дали е правилно, но все пак пробвах...) направих си документа в 1366/768 px и после написах само margin:auto (съвсем случайно,даже не знам точно какво прави тази команда...)и background-a ми се уголеми,т.е разпростря се на екрана...после написах и това за център център, но не се отчете някаква разлика....а това за замяната на цвета и момента с background-image:url(....) не съм го правила въобще....Сега не е толкова грамадно,почти е в целият ми екран...пак има скрол...Искам да е абсолютно центрирано в екарана без да има скрол,както когато виждам я виждам във Фотошоп...

    Daniela:

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

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

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

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

    Благодаря! От  монитора е.

  • Какъв е проблемът ми тук?

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

    Здравейте!
    Отново срещам проблем със завършването на урока. Като цяло следвайки това, което се казва в урока не ми се получаваха нещата. Наложи се още в началото да запазя файла в settings:default settings, за да ми се появят командите и кодовете, както са в клипа. В последствие при премахване на slices (стрелка 1) командите, ми изчезваше цялата картинка и се наложи да оставя тези данни, за да имам нещо на фон. Сега обаче при запазването на командите за (стрелка 2) центриране - няма никаква промяна.
    Някаква идея какъв е проблема?

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

    Забравих да уточня, че всъщност бекграундът ми излиза със скролове. Предполагам, че е заради мащаба, но аз все пак не съм сигурна, че всичко ми е наред

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

    CSS правилата не са поставени правилно. Синтаксиса е следния. 

    <TAG attribut1="........."   atribut2="......." atribut3="......" >
    При теб има
    <TAG attribut1="......"  ............. attribut3=".....">
    трябва да ги поставиш така:
    <BODY
    bgcolor="#000000"
    style="background-image:url(images/background.jpg);background-position:center center;"
    leftmargin="0"
    ...
    >
    Ангел Арънски:

    Изглежда малко странно, заради старите HTML атрибути като bgcolor="#000000"

    Те са от преди повече от 15 години, сега за всичко свързано със стилизирането на страницата се използва CSS. А пък той се слага в style атрибут на тага или във външен файл.
    Вътре в style атрибута вече CSS правилата се разделят със знака ' ; ' и се поставят така
    име-на-css-атрибут : стойност ; име-на-css-атрибут : стойност ; име-на-css-атрибут : стойност