Как рисовать фоны для сайта
#21
Отправлено 28 января 2014 - 00:38
На самом деле будущее наступило несколько дней назад, просто никто этого не заметил.
Jabber: mrclon@jabber.ru
#22
Отправлено 28 января 2014 - 11:32
Слон, это всё конечно круто, только боюсь, что мало кто понимает, "про чё ты". Соответственно, техзадание тебе придётся придумывать самому себе. Мы, криворукие рисовальщики фонов, дай бог своих фонов наделаем, и то уже хорошо будет.
Похоже, крышу вообще сорвало с цепи... Один якорь остался.
#23
Отправлено 28 января 2014 - 14:33
Ну, хотелка лично у меня только одна. Чтобы края могли не сливаться с фоном, а растягиваться по любой ширине экрана. Это возможно?
#24
Отправлено 28 января 2014 - 15:40
а) вставить посередине фона разрыв. т.е. по сути будет два фона, левый и правый, а между ними разрыв. Разрыв заполнится либо фоновым цветом, либо каким-то очень простым фоновым рисунком (в данном случае требования к нему более строги). В общем граница фона просто перемещается с внешней стороны на внутреннюю.
б) рисовать отдельные версии фоны для каждой распространённой ширины монитора. Это штук семь. В принципе подъёмно, учитывая что это не семь разных фонов, а семь вариантов одного фона.
Шаблон, который я выше выкладывал, нормально открывается?
На самом деле будущее наступило несколько дней назад, просто никто этого не заметил.
Jabber: mrclon@jabber.ru
#25
Отправлено 28 января 2014 - 16:02
б) рисовать отдельные версии фоны для каждой распространённой ширины монитора. Это штук семь. В принципе подъёмно, учитывая что это не семь разных фонов, а семь вариантов одного фона
Это ближе к телу, но разве можно их загрузить одновременно, чтобы браузер сам определял, какой фон нужен? И что мешает просто сделать фон с самым большим разрешением по ширине, чтобы на узких мониках был только центр, а на широких видны были и края? Извини, если туплю, просто для меня сей аспект до сих пор тайна окутанная мраком.
#26
Отправлено 28 января 2014 - 17:06
Можно. Даже загружать все фоны разом не нужно. Браузер сам по ширине экрана определит какой из фонов качать и показывать.Это ближе к телу, но разве можно их загрузить одновременно, чтобы браузер сам определял, какой фон нужен?
То-же самое с высотой экрана кстати. Можно например ставить по бокам от сайта фото персонажей во всю высоту экрана (с высотой правда будет больше погрешность, так-что нужно оставлять большие допуски).
Но делать отдельные фоны на каждую ширину экрана и на каждую высоту точно не стоит. Пять разных широт и пять разных высот это 25 разных фонов. В таком количестве легко запутаться.
Так мы сейчас так и делаем. Или ты имеешь в виду сделать фон достаточно большим что-бы его края всегда либо уходили за края экрана, либо стыковались с ними? Дело в том что разрешение мониторов бывает Очень Большим (и как мне кажется в скором времени его рост ускорится). Сейчас достаточно большой будет пожалуй ширина в 3600 пикселей (с некоторой натяжкой можно сократить до 1920). Осмысленный рисунок такой ширины будет весить довольно много.И что мешает просто сделать фон с самым большим разрешением по ширине, чтобы на узких мониках был только центр, а на широких видны были и края? Извини, если туплю, просто для меня сей аспект до сих пор тайна окутанная мраком.
К тому-же полностью избавиться от перехода в фоновый цвет не получился, ведь остаётся нижний край фона. Конечно можно и его дотянуть до низа экрана (если зафиксировать фон и не прокручивать его вместе со страницей как сейчас), но это будет уж очень большая картинка.
В принципе такой приём можно использовать, но не от хорошей жизни. например диеговские фоны Эквестрийских Бабёнок и первого Ледника в ширину как-раз 3600 пикселей (ледник почему-то уже), но на них в бесконечность уходит направленный сверху вниз градиент (в «бабоньках» резкий переход, но сути это не меняет). Он по всей ширине одинаковый и поэтому очень хорошо сжимается, если его отрезать экономия будет копеечная.
На самом деле будущее наступило несколько дней назад, просто никто этого не заметил.
Jabber: mrclon@jabber.ru
#27
Отправлено 28 января 2014 - 19:08
Интересная идея с доп.картинкой, я тогда не сразу вкурил)
А анимационный разврат, это что? Флешка?
#28
Отправлено 28 января 2014 - 19:38
Сейчас годную анимацию можно делать на JavaScript. При-чём она будет интегрирована в сайт, а не просто прямоугольник с пляшущими свиньями.
Писать что-то своё на JS я не осилю, но можно дёргать и адаптировать что-то готовое.
Например вот это http://wagerfield.github.io/parallax/
Убрать движение по горизонтали, разделить фон на отдельные картинки и готово. При движении мыши картинки будут смещаться друг относительно друга создавая ощущение объёма.
Но такие вещи нужно использовать очень осторожно, что-бы не превратить сайт в балаган. Пару раз в году, по каким-то большим событиям и со вкусом, а не просто шоб было.
На самом деле будущее наступило несколько дней назад, просто никто этого не заметил.
Jabber: mrclon@jabber.ru
#30
Отправлено 28 января 2014 - 19:48
Ну, если сможешь сделать, чтобы оно работало самостоятельно, тогда остановимся на варианте с семи размерами. Тогда размеры в студию! По ширине, естественно. Низ в фон всегда проще перевести, а вот с боковушками вечная хуета получается. Нужно каждый раз придумывать, как эти края получше с этим фоном слить.
#31
Отправлено 28 января 2014 - 20:50
Есть картинка, смайлик:
Что под руку попалось то и использовал.
Смайлик установлен в качестве фоновой картинки без повторений, размещён в центре в верху страницы
Так вставляются сейчас все фоны.
То-же самое, но теперь смайлик «повторён» по горизонтали:
Это та-же картинка что использовалась ранее, но она повторяется и уходит за края экрана (повторяться она будет столько сколько потребуется, сколько экран в ширь не увеличивай конца смайликам не будет). Обратите внимание что центральный смайлик расположен точно так-же как на предыдущем скриншоте, остальные смайлики выстраиваются по бокам от него.
То-же самое, но по горизонтали:
Обратите внимание на край смайлика заметный под блоком сайта.
Сочетание предыдущих двух вариантов:
Смайлики заполонили весь фон.
Смайлик это дополнительный фон, назовём его фоновым узором.
Добавим к нему основной фон:
Обратите внимание что в основном фоне содержатся элементы фонового узора (смайлика).
Получаем:
Если заменить смайлик на другое изображение, например:
или (картинка маленькая и светлая, её почти не видно).
То получится такой фоновый узор:
Основной фон сюда мне рисовать было лень.
На самом деле будущее наступило несколько дней назад, просто никто этого не заметил.
Jabber: mrclon@jabber.ru
#32
Отправлено 28 января 2014 - 21:09
Попозже.Ну, если сможешь сделать, чтобы оно работало самостоятельно, тогда остановимся на варианте с семи размерами. Тогда размеры в студию! По ширине, естественно. Низ в фон всегда проще перевести, а вот с боковушками вечная хуета получается. Нужно каждый раз придумывать, как эти края получше с этим фоном слить.
И ровно подогнать картинку к краям окна не получится, какая-то часть будет отрезана. Если окно открыто на весь экран то небольшая (порядка десяти пикселей), если окно браузера открыто не на весь экран по ширене то может отрезать и больше.
Так-что нужно оставлять допуски по бокам в которых не будит ничего ценного для композиции, но будет что-то что можно показать посетителю. Т.е рисуя фон, в крайних 5 - 10 пикселях (с каждой стороны) нужно оставлять только то что не жалко потерять.
Всё дело в полосе прокрутки. Она может иметь разную ширину, её может вообще не быть.
На самом деле будущее наступило несколько дней назад, просто никто этого не заметил.
Jabber: mrclon@jabber.ru
#33
Отправлено 28 января 2014 - 22:26
1024
1280
1366
1440
1600
1680
1920
Собственно эти-же широты размечены цветовыми зонами и направляющими на шаблоне который я выкладывал ранее.
Думаю некоторые можно объединить.
Оксид, если будешь делать фон по такой технологии, сделай для начала что-то простенькое, что не жалко если что в мусорку отправить. Всё-таки технологию нужно сначала опробовать.
На самом деле будущее наступило несколько дней назад, просто никто этого не заметил.
Jabber: mrclon@jabber.ru
#34
Отправлено 28 января 2014 - 22:38
Ну, в основном, я стараюсь все же придерживаться изначального соития с фоном. Если уж совсем никак, то тогда испробую эту методу.
#36
Отправлено 29 января 2014 - 01:06
Прикладываю сами фоны.
При «правильной» ширине окна браузера обрезается где-то пикселей по 10 с каждой стороны. При «неправильном» отрезается вплоть до разницы между двумя ближайшими предусмотренными ширинами поделённой на два. Например при ширине окна где-то между 1680 и 1920 может отрезать по 120 пикселей с каждой стороны
(1920-1680)/2=120
На самом деле будущее наступило несколько дней назад, просто никто этого не заметил.
Jabber: mrclon@jabber.ru
#37
Отправлено 30 января 2014 - 07:25
Ебу дашь со всеми этими вариантами разрешения.
Переводы ТГ "СМЫСЛ?"
#38
Отправлено 30 января 2014 - 08:06
Слон, а почему бы не сделать динамический фон? Жесткая картинка в шапке, а бок динамический с привязкой по краям
#39
Отправлено 30 января 2014 - 16:21
Рисуй по старинке, кто-же мешает.Ебу дашь со всеми этими вариантами разрешения.
Ничего не мешает. Это будут просто три картинки: левая, центральная и правая, спозиционированные соответственно в левый верхний угол, в верх-центр и в правый верхний угол.Слон, а почему бы не сделать динамический фон? Жесткая картинка в шапке, а бок динамический с привязкой по краям
Расстояние между картинками будет зависеть от ширины окна браузера.
На самом деле будущее наступило несколько дней назад, просто никто этого не заметил.
Jabber: mrclon@jabber.ru
#40
Отправлено 30 января 2014 - 16:24
Рисуй по старинке, кто-же мешает.
Так при, не "моем разрешении" у картинки может подрезаться полезная часть.
Переводы ТГ "СМЫСЛ?"
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 скрытых пользователей