Перейти к содержимому


Фотография

Как рисовать фоны для сайта


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 134

#21 MrClon

MrClon

    Администратор

  • Администраторы
  • PipPipPipPipPipPipPipPipPipPip
  • 15 530 сообщений
  • Пол:Мужчина
  • Город:Москва

Отправлено 28 января 2014 - 00:38

Перечисленное выше это только те применения доступных технологий которые придумал я. Если огласите свои хотелки то вполне возможно я найду как их можно реализовать.

На самом деле будущее наступило несколько дней назад, просто никто этого не заметил.

Jabber: mrclon@jabber.ru


#22 Erceck

Erceck

    Верховный Зануда Форума

  • Модераторы разделов
  • PipPipPipPipPipPipPipPipPip
  • 1 146 сообщений
  • Пол:Мужчина
  • Интересы:Корыстные.

Отправлено 28 января 2014 - 11:32

Слон, это всё конечно круто, только боюсь, что мало кто понимает, "про чё ты". Соответственно, техзадание тебе придётся придумывать самому себе. Мы, криворукие рисовальщики фонов, дай бог своих фонов наделаем, и то уже хорошо будет. 


Похоже, крышу вообще сорвало с цепи... Один якорь остался.

Мой недоделанный, убогий сайт.


#23 Oxid

Oxid

    Старожил

  • Пользователи
  • PipPipPipPipPipPipPipPipPipPip
  • 9 158 сообщений
  • Пол:Мужчина
  • Город:Украина, Одесса

Отправлено 28 января 2014 - 14:33

Ну, хотелка лично у меня только одна. Чтобы края могли не сливаться с фоном, а растягиваться по любой ширине экрана. Это возможно?


Ну и шо? Идите нахуй!

#24 MrClon

MrClon

    Администратор

  • Администраторы
  • PipPipPipPipPipPipPipPipPipPip
  • 15 530 сообщений
  • Пол:Мужчина
  • Город:Москва

Отправлено 28 января 2014 - 15:40

В смысле что-бы фон плотно прилегал к обоим краям окна? Можно, но тогда нужно либо:
а) вставить посередине фона разрыв. т.е. по сути будет два фона, левый и правый, а между ними разрыв. Разрыв заполнится либо фоновым цветом, либо каким-то очень простым фоновым рисунком (в данном случае требования к нему более строги). В общем граница фона просто перемещается с внешней стороны на внутреннюю.
б) рисовать отдельные версии фоны для каждой распространённой ширины монитора. Это штук семь. В принципе подъёмно, учитывая что это не семь разных фонов, а семь вариантов одного фона.

Шаблон, который я выше выкладывал, нормально открывается?

На самом деле будущее наступило несколько дней назад, просто никто этого не заметил.

Jabber: mrclon@jabber.ru


#25 Oxid

Oxid

    Старожил

  • Пользователи
  • PipPipPipPipPipPipPipPipPipPip
  • 9 158 сообщений
  • Пол:Мужчина
  • Город:Украина, Одесса

Отправлено 28 января 2014 - 16:02

 

б) рисовать отдельные версии фоны для каждой распространённой ширины монитора. Это штук семь. В принципе подъёмно, учитывая что это не семь разных фонов, а семь вариантов одного фона

Это ближе к телу, но разве можно их загрузить одновременно, чтобы браузер сам определял, какой фон нужен? И что мешает просто сделать фон с самым большим разрешением по ширине, чтобы на узких мониках был только центр, а на широких видны были и края? Извини, если туплю, просто для меня сей аспект до сих пор тайна окутанная мраком.


Ну и шо? Идите нахуй!

#26 MrClon

MrClon

    Администратор

  • Администраторы
  • PipPipPipPipPipPipPipPipPipPip
  • 15 530 сообщений
  • Пол:Мужчина
  • Город:Москва

Отправлено 28 января 2014 - 17:06

Это ближе к телу, но разве можно их загрузить одновременно, чтобы браузер сам определял, какой фон нужен?

Можно. Даже загружать все фоны разом не нужно. Браузер сам по ширине экрана определит какой из фонов качать и показывать.
То-же самое с высотой экрана кстати. Можно например ставить по бокам от сайта фото персонажей во всю высоту экрана (с высотой правда будет больше погрешность, так-что нужно оставлять большие допуски).
Но делать отдельные фоны на каждую ширину экрана и на каждую высоту точно не стоит. Пять разных широт и пять разных высот это 25 разных фонов. В таком количестве легко запутаться.

И что мешает просто сделать фон с самым большим разрешением по ширине, чтобы на узких мониках был только центр, а на широких видны были и края? Извини, если туплю, просто для меня сей аспект до сих пор тайна окутанная мраком.

Так мы сейчас так и делаем. Или ты имеешь в виду сделать фон достаточно большим что-бы его края всегда либо уходили за края экрана, либо стыковались с ними? Дело в том что разрешение мониторов бывает Очень Большим (и как мне кажется в скором времени его рост ускорится). Сейчас достаточно большой будет пожалуй ширина в 3600 пикселей (с некоторой натяжкой можно сократить до 1920). Осмысленный рисунок такой ширины будет весить довольно много.
К тому-же полностью избавиться от перехода в фоновый цвет не получился, ведь остаётся нижний край фона. Конечно можно и его дотянуть до низа экрана (если зафиксировать фон и не прокручивать его вместе со страницей как сейчас), но это будет уж очень большая картинка.

В принципе такой приём можно использовать, но не от хорошей жизни. например диеговские фоны Эквестрийских Бабёнок и первого Ледника в ширину как-раз 3600 пикселей (ледник почему-то уже), но на них в бесконечность уходит направленный сверху вниз градиент (в «бабоньках» резкий переход, но сути это не меняет). Он по всей ширине одинаковый и поэтому очень хорошо сжимается, если его отрезать экономия будет копеечная.

На самом деле будущее наступило несколько дней назад, просто никто этого не заметил.

Jabber: mrclon@jabber.ru


#27 Agent DieGo

Agent DieGo

    Постоянный житель

  • Пользователи
  • PipPipPipPipPipPipPipPipPip
  • 2 433 сообщений
  • Пол:Мужчина
  • Город:Москва

Отправлено 28 января 2014 - 19:08

Интересная идея с доп.картинкой, я тогда не сразу вкурил)

А анимационный разврат, это что? Флешка?



#28 MrClon

MrClon

    Администратор

  • Администраторы
  • PipPipPipPipPipPipPipPipPipPip
  • 15 530 сообщений
  • Пол:Мужчина
  • Город:Москва

Отправлено 28 января 2014 - 19:38

Нет, с флешом много геморроя, на и не нужен он.
Сейчас годную анимацию можно делать на JavaScript. При-чём она будет интегрирована в сайт, а не просто прямоугольник с пляшущими свиньями.
Писать что-то своё на JS я не осилю, но можно дёргать и адаптировать что-то готовое.
Например вот это http://wagerfield.github.io/parallax/
Убрать движение по горизонтали, разделить фон на отдельные картинки и готово. При движении мыши картинки будут смещаться друг относительно друга создавая ощущение объёма.

Но такие вещи нужно использовать очень осторожно, что-бы не превратить сайт в балаган. Пару раз в году, по каким-то большим событиям и со вкусом, а не просто шоб было.

На самом деле будущее наступило несколько дней назад, просто никто этого не заметил.

Jabber: mrclon@jabber.ru


#29 MrClon

MrClon

    Администратор

  • Администраторы
  • PipPipPipPipPipPipPipPipPipPip
  • 15 530 сообщений
  • Пол:Мужчина
  • Город:Москва

Отправлено 28 января 2014 - 19:41

Интересная идея с доп.картинкой, я тогда не сразу вкурил)

Я про то применение доп картинок которое описано выше тебе вроде отдельно не расписывал.

На самом деле будущее наступило несколько дней назад, просто никто этого не заметил.

Jabber: mrclon@jabber.ru


#30 Oxid

Oxid

    Старожил

  • Пользователи
  • PipPipPipPipPipPipPipPipPipPip
  • 9 158 сообщений
  • Пол:Мужчина
  • Город:Украина, Одесса

Отправлено 28 января 2014 - 19:48

Ну, если сможешь сделать, чтобы оно работало самостоятельно, тогда остановимся на варианте с семи размерами. Тогда размеры в студию! По ширине, естественно. Низ в фон всегда проще перевести, а вот с боковушками вечная хуета получается. Нужно каждый раз придумывать, как эти края получше с этим фоном слить.


Ну и шо? Идите нахуй!

#31 MrClon

MrClon

    Администратор

  • Администраторы
  • PipPipPipPipPipPipPipPipPipPip
  • 15 530 сообщений
  • Пол:Мужчина
  • Город:Москва

Отправлено 28 января 2014 - 20:50

По поводу дополнительных фоновых картинок состряпал примерчик.
Есть картинка, смайлик:
240px-Smiley.svg.png
Что под руку попалось то и использовал.

Смайлик установлен в качестве фоновой картинки без повторений, размещён в центре в верху страницы
2014-01-27_03.34.31.png
Так вставляются сейчас все фоны.

То-же самое, но теперь смайлик «повторён» по горизонтали:
2014-01-27_03.34.46.png
Это та-же картинка что использовалась ранее, но она повторяется и уходит за края экрана (повторяться она будет столько сколько потребуется, сколько экран в ширь не увеличивай конца смайликам не будет). Обратите внимание что центральный смайлик расположен точно так-же как на предыдущем скриншоте, остальные смайлики выстраиваются по бокам от него.

То-же самое, но по горизонтали:
2014-01-27_03.34.55.png
Обратите внимание на край смайлика заметный под блоком сайта.

Сочетание предыдущих двух вариантов:
2014-01-27_03.35.05.png
Смайлики заполонили весь фон.

Смайлик это дополнительный фон, назовём его фоновым узором.
Добавим к нему основной фон:
bg-test-4.jpg
Обратите внимание что в основном фоне содержатся элементы фонового узора (смайлика).

Получаем:
2014-01-28_21.36.45.png

Если заменить смайлик на другое изображение, например:
fa78ffd27e39.png
или post-1-0-84970900-1390928971.png (картинка маленькая и светлая, её почти не видно).

То получится такой фоновый узор:
2014-01-28_21.45.16.png 2014-01-28_21.45.46.png
Основной фон сюда мне рисовать было лень.

Прикрепленные изображения

  • skelatal_weave.png

На самом деле будущее наступило несколько дней назад, просто никто этого не заметил.

Jabber: mrclon@jabber.ru


#32 MrClon

MrClon

    Администратор

  • Администраторы
  • PipPipPipPipPipPipPipPipPipPip
  • 15 530 сообщений
  • Пол:Мужчина
  • Город:Москва

Отправлено 28 января 2014 - 21:09

Ну, если сможешь сделать, чтобы оно работало самостоятельно, тогда остановимся на варианте с семи размерами. Тогда размеры в студию! По ширине, естественно. Низ в фон всегда проще перевести, а вот с боковушками вечная хуета получается. Нужно каждый раз придумывать, как эти края получше с этим фоном слить.

Попозже.

И ровно подогнать картинку к краям окна не получится, какая-то часть будет отрезана. Если окно открыто на весь экран то небольшая (порядка десяти пикселей), если окно браузера открыто не на весь экран по ширене то может отрезать и больше.
Так-что нужно оставлять допуски по бокам в которых не будит ничего ценного для композиции, но будет что-то что можно показать посетителю. Т.е рисуя фон, в крайних 5 - 10 пикселях (с каждой стороны) нужно оставлять только то что не жалко потерять.
Всё дело в полосе прокрутки. Она может иметь разную ширину, её может вообще не быть.

На самом деле будущее наступило несколько дней назад, просто никто этого не заметил.

Jabber: mrclon@jabber.ru


#33 MrClon

MrClon

    Администратор

  • Администраторы
  • PipPipPipPipPipPipPipPipPipPip
  • 15 530 сообщений
  • Пол:Мужчина
  • Город:Москва

Отправлено 28 января 2014 - 22:26

Распространённые широты мониторов в пикселях
1024
1280
1366
1440
1600
1680
1920
Собственно эти-же широты размечены цветовыми зонами и направляющими на шаблоне который я выкладывал ранее.

Думаю некоторые можно объединить.

Оксид, если будешь делать фон по такой технологии, сделай для начала что-то простенькое, что не жалко если что в мусорку отправить. Всё-таки технологию нужно сначала опробовать.

На самом деле будущее наступило несколько дней назад, просто никто этого не заметил.

Jabber: mrclon@jabber.ru


#34 Oxid

Oxid

    Старожил

  • Пользователи
  • PipPipPipPipPipPipPipPipPipPip
  • 9 158 сообщений
  • Пол:Мужчина
  • Город:Украина, Одесса

Отправлено 28 января 2014 - 22:38

Ну, в основном, я стараюсь все же придерживаться изначального соития с фоном. Если уж совсем никак, то тогда испробую эту методу.


Ну и шо? Идите нахуй!

#35 MrClon

MrClon

    Администратор

  • Администраторы
  • PipPipPipPipPipPipPipPipPipPip
  • 15 530 сообщений
  • Пол:Мужчина
  • Город:Москва

Отправлено 28 января 2014 - 23:31

Тогда сейчас сам намалюю какой-то прототип для проверки.

На самом деле будущее наступило несколько дней назад, просто никто этого не заметил.

Jabber: mrclon@jabber.ru


#36 MrClon

MrClon

    Администратор

  • Администраторы
  • PipPipPipPipPipPipPipPipPipPip
  • 15 530 сообщений
  • Пол:Мужчина
  • Город:Москва

Отправлено 29 января 2014 - 01:06

Сделал тестовый фон, вроде идея работает. Можно посмотреть на http://test.uft.me/
Прикладываю сами фоны.
При «правильной» ширине окна браузера обрезается где-то пикселей по 10 с каждой стороны. При «неправильном» отрезается вплоть до разницы между двумя ближайшими предусмотренными ширинами поделённой на два. Например при ширине окна где-то между 1680 и 1920 может отрезать по 120 пикселей с каждой стороны
(1920-1680)/2=120

Прикрепленные изображения

  • 1024.png
  • 1280.png
  • 1366.png
  • 1440.png
  • 1600.png
  • 1680.png
  • 1920.png

На самом деле будущее наступило несколько дней назад, просто никто этого не заметил.

Jabber: mrclon@jabber.ru


#37 kro44i

kro44i

    Непостоянный житель

  • Пользователи
  • PipPipPipPipPipPipPipPipPip
  • 1 433 сообщений
  • Пол:Мужчина
  • Город:Old Kupavna

Отправлено 30 января 2014 - 07:25

Ебу дашь со всеми этими вариантами разрешения.


Переводы ТГ "СМЫСЛ?"


#38 Agent DieGo

Agent DieGo

    Постоянный житель

  • Пользователи
  • PipPipPipPipPipPipPipPipPip
  • 2 433 сообщений
  • Пол:Мужчина
  • Город:Москва

Отправлено 30 января 2014 - 08:06

Слон, а почему бы не сделать динамический фон? Жесткая картинка в шапке, а бок динамический с привязкой по краям



#39 MrClon

MrClon

    Администратор

  • Администраторы
  • PipPipPipPipPipPipPipPipPipPip
  • 15 530 сообщений
  • Пол:Мужчина
  • Город:Москва

Отправлено 30 января 2014 - 16:21

Ебу дашь со всеми этими вариантами разрешения.

Рисуй по старинке, кто-же мешает.

Слон, а почему бы не сделать динамический фон? Жесткая картинка в шапке, а бок динамический с привязкой по краям

Ничего не мешает. Это будут просто три картинки: левая, центральная и правая, спозиционированные соответственно в левый верхний угол, в верх-центр и в правый верхний угол.
Расстояние между картинками будет зависеть от ширины окна браузера.

На самом деле будущее наступило несколько дней назад, просто никто этого не заметил.

Jabber: mrclon@jabber.ru


#40 kro44i

kro44i

    Непостоянный житель

  • Пользователи
  • PipPipPipPipPipPipPipPipPip
  • 1 433 сообщений
  • Пол:Мужчина
  • Город:Old Kupavna

Отправлено 30 января 2014 - 16:24

Рисуй по старинке, кто-же мешает.

Так при, не "моем разрешении" у картинки может подрезаться полезная часть.


Переводы ТГ "СМЫСЛ?"



Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 скрытых пользователей