Сообщений в теме: 134

[Erceck]

Предисловие к теме от MrClon:
Тема, во всяком случае её первая страница, обязательна к прочтению всем кто собирается рисовать фоны для нашего сайта.

Краткая вводная, на всякий случай:
На нашем сайте, uft.me, фон используется как своего рода рекламная площадка. На нём размещается реклама фильмов участников Альянса, важных событий в жизни альянса и тому подобного. Верхняя часть фона кликабельна.

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

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

Далее оригинальный пост из курилки

Дело в том, что старый фон крайне ненагляден. Я тут кумекал над фоном в честь вывешивания ХП на рутор в суперкачестве, так Слон задолбался мне объяснять что не так. И я тупил до тех пор, пока Слон взял и не показал всё что надо наглядно. Хотя в этот раз зря показывал,- всё равно в итоге к нужному виду сам всё и привёл. И ещё... В нынешнем фоне ЛК УХ сверху корабль... Словами Фон Вальтерштайна, он выглядит аки фиалка. Понимаю, что скоро сменят, но впредь на картинки надо внимательней смотреть.

Сообщение отредактировал MrClon: 23 августа 2013 - 18:47
Добавил придесловие

[MrClon]

Собственно Эркек всё правильно сказал. Добавлю что много одинаковых ошибок от разных авторов.

[Erceck]

В общих словах суть такова: при изготовлении постера надо обеспечить плавный переход картинки в фоновый цвет. Надо выставить жёсткость кисти 15-25% и растушевать края справа слева и снизу таким образом, чтобы вся картинка плавно переходила в фон. Я тут скриншот подготовил, как оно примерно должно выглядеть с фоном и без.

[MrClon]

Это одна из сутей. Переход в фон должен быть плавным и естественным. При-чём в приведённом примере плавность есть, а вот естественности не много.

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

Иллюстрация линий отреза (масштаб не один к одному, изображение уменьшено для наглядности, полноразмерная версия тут)

Тут изображены:
Линии отреза. Примерно по этим линиям пройдут границы мониторов пользователей (примерно, потому-что нужно делать поправку на ширину полосы прокрутки; будем считать что эти линии могут сместиться к центру изображения на 10 пикселей каждая).
Зоны видимости (обозначены различными цветами). Зоны видимости образуются линиями отреза. Цвета зон произвольные, не смотрите на них.

Так-же тут наложен реально висевший на сайте фон (для наглядности поставил одну из модификаций фона от Еркека).
При наложении на реальный фон шаблона с линиями отреза и зонами видимости становятся заметны новые проблемы:
У пользователей с шириной экрана в 1280 пикселей слева торчит ухо Дамолдора и волосня Гермионы, а справа торчат борода и фонарик Хагреда.
У посетителей с шириной экрана в 1366 пикселей (на картинке опечатка, 1266 вместо 1366) ополовинено лицо Гермионы, а так-же немного покоцаны Дамблдор и Хагред.

NB: вообще-то отрезать человеку половину лица может быть довольно удачной идеей (тут должен быть кровожадный смайлик), но делать это надо с пониманием. Вот пример достаточно удачного ополовинивания. Просто контролируйте это и полагайтесь на своё чувство прекрасного.

[MrClon]

Сам шаблон в полном размере с линиями отреза и зонами видимости лежит тут.
Скриншот сайта вставлен просто для наглядности.
Размер шаблона такой большой что-бы было понятно что монитор у посетителя может быть сколь угодно большим (особенно по высоте, на то и придумали прокрутку), и по сути нельзя разместить какой-то объект у края экрана, всегда найдётся кто-то у кого этот край будет находиться дальше. Размер шаблона кстати взят не с потолка, а из статистики сайта: в ней были посетители с такими широтами и высотами мониторов.
На готовом фоне не нужны никакие элементы самого шаблона/макета (хз как это назвать).

[MrClon]

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

Похожий вариант: вынести за пределы «безопасной зоны» только те элементы которые не чувствительны к обрезке. Хороший пример, кирпичная стена ничуть не пострадает от обрезки в произвольном месте.
Стоит отметить: как уже говорил ранее элементы фона не должны редко обрываться (исключения: верхний край и те места где фон перекрывается сайтом), элементы фона должны либо логически (естественно) завершаться, либо плавно хоты-бы плавно растворяться в фоновом цвете. В данном случае удачно сочетаются оба варианта: растворение в чёрном фоне выглядит весьма естественно для кирпичной стены. Другой пример этого приёма, здесь клубы тумана плавно растворяются до одноцветного фона (что вполне органично для тумана). В прочем смотрится это пожалуй менее естественно чем кирпичная стена.

Ну и напоследок — дзен. Размещать чувствительные к обрезке элементы так что-бы линии отреза не приходились на них, а если уж приходятся не вредили им. Та-же половина головы может смотреться весьма эффектно, а если например человек стоит в полоборота лицом к центру то зад ему отрезать можно совершенно безболезненно (Хагрид с предыдущего примера обрезанный по пятой с права линии смотрится вполне органично, как будто выглядывает из-за края).
В общем используйте Силу, верьте в себя и пробуйте.

[Некромант]

И ещё... В нынешнем фоне ЛК УХ сверху корабль... Словами Фон Вальтерштайна, он выглядит аки фиалка. Понимаю, что скоро сменят, но впредь на картинки надо внимательней смотреть.

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

[Дитя Цветов]

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

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

[Дитя Цветов]

разъясняю этим самым некоторым слова эркека: на этом фоне лекс смотрится, как дорисованная школотником фиалка во рту богоматери на иконе. Неуместно и вырвиглазно

[Некромант]

А на новом?

Меня лично как автора сериала устраивает. Сколько людей, столько и мнений.

[MrClon]

Давайте как-то ближе к теме. По поводу символизма формы воображаемых космических кораблей можно поговорить и в курилке. Для метания фиалок так-же есть специальное место.

[MrClon]

Про фоновый цвет.
Фоновый цвет это такой цвет в который покрашен фон (невероятно, но факт). Фоновое изображение (то что выше я называл просто фоном) накладывается поверх фонового цвета, если фоновое изображение меньше чем экран посетителя то фоновый цвет будет торчать из-под него.
Пример:
Нормальное состояние, фоновое изображение сливается с фоновым цветом, нельзя понять где кончается изображение.
Фоновый цвет заменён на синий, понятно где кончается изображение и начинается фон.

О фоновом цвете нужно знать две вещи:
1) Он только один. Это может быть любой цвет, один любой цвет. А значит по всем краям ваше фоновое изображение должно плавно переходить в один и тот-же цвет.
2) Фоновый цвет не должен быть белым, иначе сайт сливается с фоном (пример).

[MrClon]

Сейчас думаю над новой технической реализацией фонов на сайте. Можно несколько раздвинуть границы возможного, но нужно понять нужно-ли это и если нужно то в какую сторону в первую очередь копать.
Какие у господ рисовальщиков есть хотелки или претензии к существующим границам возможного. Вообще чего-бы хотелось в плане рисования фонов? Высказывайте любые безумные хотелки или претензии, не стесняйтесь. На самом деле современные веб-технологии позволяют сделать многое.

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

[Erceck]

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

Есть ещё одна вещь, напишу здесь же. В некоторых темах нужна галерея картинок. Ну, что-то вроде вконтактовского фотоальбома. Чтобы человек мог туда перейти и смотреть картинки с пояснениями. Натолкнула на эту мысль тема "Хэндмейд". Кому-то гораздо интереснее будет просто пролистать альбом с картинками, чем читать тему. В общем-то особой нужды в таких альбомах нет,- всё можно вывалить на форуме (я помнил старые нормы на контент от посетителя, что-то около 2 мб).

[MrClon]

 bg2_c.psd.zip   4,36МБ   458 Количество загрузок:
Фотошопа у меня нет, psd делал GIMPом, так-что фотошоп его может не понять. Это исходник png-шного шаблона, на нём обозначен сам сайт и «линии отреза» краями разных мониторов. Для наглядности туда-же вложен фон HP и AMDшный камень.

Так-же прикладываю все фоны которые сейчас используются на сайте архивом и отдельными картинками
 uft_backgrounds_2014.01.26.zip   2,42МБ   472 Количество загрузок:
Фон эквестрийских бабонек изувечило из-за слишком большой ширины. Вообще по хорошему так делать не надо.

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

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

[Пумба]

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

[kro44i]

Нахер, надо взяться и сделать фоны для наших переводов, а то совсем все плохо.

[Пумба]

Категорически поддерживаю. По поводу "взяться и сделать".

[MrClon]

Ага, надо. И не только тебе надо.
Из Оксида давно пора выбить фоны к его старым фильмам. Еркековские «Умерли» 1 и 2 надо порекламировать перед выходом третьей части. Да много на что фоны рисовать нужно.

[MrClon]

Есть возможность делать фоны для сайта используя вместо фонового цвета какой-то узор из повторяющихся элементов. В сети дофига готовых шаблонов бесконечных фонов которые можно использовать (например тут http://subtlepatterns.com).
Делать такие фоны лишь немногим сложнее чем обычные (нежно немного тупой и аккуратной ручной работы).
Это кому-то интересно.

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

Можно делать фон из нескольких элементов, при-чём по разному размещать эти элементы. Например основной фон поставить как обычно, а дополнительный элемент положить в нижний левый угол. При-чём можно положить его и вниз страницы (что-бы увидеть нужно прокрутить страницу до конца), так и в угол экрана (элемент всегда будет в нижнем левом углу экрана, как ни прокручивай).
Пример первого варианта:

Тут Марвин это отдельная картинка, а не часть фона с Хоббитом.
Второй вариант надо показывать вживую что-бы было понятно.

Можно использовать всяческий анимационный разврат с JavaScript-ом. Не gif-ки какие-то там. Но для этого придётся использовать какие-то готовые скрипты, так-что диапазон возможного сокращается. Да и вообще с подобными вещами нужно обходиться осторожно, что-бы не превратить сайт в балаган, и использовать их редко.

Кому-то из тех кто рисует фоны что-то из этого интересно?