Добавление текстуры

[alexandr_v-vich]

Решил на фон положить текстуру. В Люстре у макета стоит серый фон. Добавляем эффект текстуры. Возникает вопрос — как теперь это переложить на html? Да, вопрос простейший, но что ж, столкнулся впервые))

Задача первая. Вариант сделать весь фон картинкой с текстурой огромных размеров и засунуть в bg с обрезкой через overflow. Но не скажутся ли такие размеры на скорости? Просто делать фон под стандартные размеры экранов и ставить репит вообще не алё, как и просто продолжать серым фоном…

Задача вторая. Вариант сделать небольшой кусок и пустить через репит. Но вопрос у меня. Есть ли оптимальные или стандартные размеры такого куска? Вообще, по-моему часто встречались 32*32… И проблема же ещё какая — в макете то не репит, а эффект, т.е. по всему фону текстура практически (может и полностью, не всматривался) оригинальная. Более менее схожесть идёт на размеры, ну где-то 200*100. Если таким куском вставить через репит, это нормально?

Ох, не знаю, понятно ли выразил мысль, ну будем надеяться)

P.S. Был у меня как-то ресурс один хороший в закладках на эти текстуры. Потерялся. Если кто, что знает — кидайте ссылки, буду признателен)

А, ну и скину-ка я, наверное, про что речь

[Viper]

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

1. Поговорить с дизайнером. На практике, почти всегда, дизайнеры и подразумевают репит. Им просто удобней и быстрее текстурой такое "нарисовать". А если не думали, то без проблем соглашаються на репит. Но... конечно бывают исключения...

2. Canvas. Хотя не всегда ( и фон тут, вроде как, не сильно тяжелый ) та и ИЕ8-

П.С. Лично я делал бы репит и не себе мозг. И ты попробуй его порепитить: скорей всего, он отлично репититься и не кто не заметит Я морально не смог бы себя заставить делать это Огромным фоном, даже сложно представить каких размеров... Диапазон доступных (в плане денег) разрешений уже превышает 2000px

Edited April 18, 2012 by Viper

[alexandr_v-vich]

Viper, я дизайнер

Так репит-то на что? На вот эту вот штуковину, что в первом сообщении? Или на обрезок небольшой? В общем, какого размера делать репитную часть?

За canvas спасибо, но этой темой надо овладеть хоть немного, а времени пока нет…

Edited April 18, 2012 by alexandr_v-vich

[alexandr_v-vich]

Поставил эту картинку (ну что вначале?) на фон. Отображается нормально. Репит незаметен. Вроде всё.

Но интересна всё же, вот, сама идея работы с текстурами. Есть же какие-то особенности.

Если есть какие-нибудь ещё мысли, идеи, ссылки на статьи по теме — буду рад всему)

[Viper]

Viper, я дизайнер

Упс... иногда забываю напоминать себе, что нужно всегда вникать в суть...

Так репит-то на что? На вот эту вот штуковину, что в первом сообщении? Или на обрезок небольшой? В общем, какого размера делать репитную часть?

чем меньше, тем лучше. Все зависит от текстуры. Если на глаз сложно определить, то приходиться методом тыка выявлять более-менее оптимальный вариант. Не существует каких-то стандартных размеров. Идея всегда одна - чем меньше картинка, тем лучше. Если верстальщик делает на совесть, так сказать, то будет "тыкать" пока не найдет оптимальный размер репита (та хоть и 4х6, примером, или 24х24), при котором не будет видно "швов" ) Меня это всегда утомляло..., но это часть работы верстальщика. Та и со временем быстро набиваешь руку.

П.С. Если ты только дизайнер - верстальщик сам разбереться. Если верстать собрался: ну вырежь квадрат 12х12, например, прорепить и посмотри )

[Nanto]

1) 1920px по ширине! Пользователи с бОльшими монстрами в любом случае привыкли к

overflow:hidden;

.

2) Вменяемый дизайнер всегда встаялет в макет слой с куском паттерна повторяющейся структуры (но как часто вам попадаются вменяемые дизайнеры).

3) Если бы я дизайнил конкретный проект, то, конечно, подобрал бы повторяющийся кусок. Лучше не слишком мелкий (какая разница 3кБ загрузит или 1). 100x100 вполне!

[Viper]

1) 1920px по ширине! Пользователи с бОльшими монстрами в любом случае привыкли к

overflow:hidden;

.

Вот зачем такое советовать дизайнеру...( Дизайн должен быть гибкий и, при возможности, адаптивним. Подстраиваться под какие-то размеры - проблема которую уже годами пытаються искоренить. Со столь стремительным ростом мобильных устройст и доступности нормальных, больших мониторов, к этому уже стали ( и нужно ) прислушиваться. У iPad3, например, разрешение - 2048x1536. Разрешение - это не величина экрана, а количество пикселей, величина которых может кардинально отличаться. Та даже и не в этом основная проблема... Сайты нужно делать "на века". "Мы не знаем, что нас ждет в будущем"(с).

И почему какие-то определенные пользователи должны прывыкать? Вполне в будущем, этим пользователем станешь Ты. И не факт что из-за дизайна подогнанного под 1920px ты, например, не купишь товар в Этом интеренет-магазине, а купишь в другом, где об этом позаботилиль. Любая мелочь может повлиять на твое отношение к сайту ( даже не осознанно ). Это доводят многочисленные AB тесты, аналитика, статистика и тд... Дизайнер обязан продумывать дизайн на гибкость и стуктуру, по крайней мере, профессиональный. А дизайн, ровно на 1920px, указивает на не профессионализм... (

Крупные мировые компании "бьються" чутли не за каждого пользователя (ИЕ6 не в счет: люди также понимают ценность технологического развития). Хотите развиваться - учитесь делать сайты мирового уровня, когда-то это будет стандартом.

3) Если бы я дизайнил конкретный проект, то, конечно, подобрал бы повторяющийся кусок. Лучше не слишком мелкий (какая разница 3кБ загрузит или 1). 100x100 вполне!

А лучше ~300байт. На сайтах с посещаемостью 50тис+ уже есть разница... Ну, наверное, пока на практике не столкнешься, не поймешь... Понимаю, что в это не просто вот-так-вот поверить...

П.С. В общем, это все, что касаеться филосовских высказиваний, мое ИМХО ))

[SelenIT]

У iPad3, например, разрешение - 2048x1536

CSS-пикселей там всё равно 1024?768. Так что кол-во CSS-пикселей (по стандарту обязанных стремиться к 1/96 дюйма) и размер экрана всё-таки неплохо коррелируют (хотя разброс, да, основательный).

[alexandr_v-vich]

SelenIT,

CSS-пикселей там всё равно 1024?768

Как это?

(по стандарту обязанных стремиться к 1/96 дюйма)

Есть ссылка какая-нибудь на эти стандарты?

Так. Я понял, чем меньше, тем лучше(про картинку)? И подбирать этот размер мне уже под свой вкус?

Ну ещё тогда два вопроса. Там, вначале картника 800*800. Весит 250к. Если всё же сделать большую (ну пусть 1 Мб), как это сыграет на скорость?

И по расширению. Так-то я все картинки всегда через png делаю. Jpeg использую только на фото. Нормально?

Edited April 19, 2012 by alexandr_v-vich

[Nanto]

Вот зачем такое советовать дизайнеру...( Дизайн должен быть гибкий и, при возможности, адаптивним. Подстраиваться под какие-то размеры - проблема которую уже годами пытаються искоренить. Со столь стремительным ростом мобильных устройст и доступности нормальных, больших мониторов, к этому уже стали ( и нужно ) прислушиваться. У iPad3, например, разрешение - 2048x1536. Разрешение - это не величина экрана, а количество пикселей, величина которых может кардинально отличаться. Та даже и не в этом основная проблема... Сайты нужно делать "на века". "Мы не знаем, что нас ждет в будущем"(с).

И почему какие-то определенные пользователи должны прывыкать? Вполне в будущем, этим пользователем станешь Ты. И не факт что из-за дизайна подогнанного под 1920px ты, например, не купишь товар в Этом интеренет-магазине, а купишь в другом, где об этом позаботилиль. Любая мелочь может повлиять на твое отношение к сайту ( даже не осознанно ). Это доводят многочисленные AB тесты, аналитика, статистика и тд... Дизайнер обязан продумывать дизайн на гибкость и стуктуру, по крайней мере, профессиональный. А дизайн, ровно на 1920px, указивает на не профессионализм... (

Крупные мировые компании "бьються" чутли не за каждого пользователя (ИЕ6 не в счет: люди также понимают ценность технологического развития). Хотите развиваться - учитесь делать сайты мирового уровня, когда-то это будет стандартом.

Ну ладно повотряющийся-то паттерн - им всегда можно замостить... А с обычной графикой что делать? Грузить мегабайтные картинки для хэдера, например, разрешением под... А под сколько кстати? Вот сегодня я сделаю в 5000px, а завтра "этим пользователем станешь Ты"...

А лучше ~300байт. На сайтах с посещаемостью 50тис+ уже есть разница... Ну, наверное, пока на практике не столкнешься, не поймешь... Понимаю, что в это не просто вот-так-вот поверить...

Разница в чём? В нагрузке на сервер? Знаете, вот эта Yahoo-вская ерунда по серверной оптимизация мне кажется высосанной из пальца! Куда важнее клиентская оптимизация! Взять паттерн 10px/10px замостить им весь документ (а мостить возможно долго придётся), потом навестить всяких box-shadow и jQuery.animation... И можете не волноваться за серверную оптимизацию - пользователь вряд ли вернётся!

[troll]

Есть ссылка какая-нибудь на эти стандарты?

CSS Values and Units Module Level 3

По-русски: Новые и старые единицы измерения (краткий обзор)

Там же и ответ на вопрос, как 4 физических пикселя превращаются в один css-ный.

[alexandr_v-vich]

CSS Values and Units Module Level 3

По-русски: Новые и старые единицы измерения (краткий обзор)

Там же и ответ на вопрос, как 4 физических пикселя превращаются в один css-ный.

С английского мало что понял, но — Какого чёрта? Как вы живёте с этим? Зачем ломать стандартную логику? Пиксель и пиксель. Зачем его(!) приравнивать к аболютному значению?? Почему монитор отображает мне 2000px, а браузер 1024???

Вот, у psywalker`a — „В каком нибудь лазерном принтере пиксель – это один микрон, а например, на уличном экране, пиксель уже равняется пару сантиметрам.“. И что, разве это не норма? Разве это не логично? Ничего не понимаю, зачем к дюйму то приравнивать стали?

Как же я жил до этого хорошо…

Да, чтобы разобраться ещё времени потребуется…

Спасибо за ссылки, troll.

[Great Rash]

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

Размер - чем меньше тем лучше, формат - в данном случае PNG8 или GIF (в зависимости от того, что меньше весит, может вообще JPG). Вырезаем маленький кусок (без фанатизма конечно), для данной текстуры подойдет, скажем, 30х30. Потом в фотошопе юзаем filter -> other -> offset с половинными значениями (для 30х30 ставим 15х15) и смотрим видно ли швы. Если швы видно, юзаем healing brush или patch tool, и замазываем швы. Профит.

[alexandr_v-vich]

Great Rash, ну всё ясно, чо. Благодарю!

[Viper]

Ну ладно повотряющийся-то паттерн - им всегда можно замостить... А с обычной графикой что делать? Грузить мегабайтные картинки для хэдера, например, разрешением под... А под сколько кстати? Вот сегодня я сделаю в 5000px, а завтра "этим пользователем станешь Ты"...

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

Разница в чём? В нагрузке на сервер? Знаете, вот эта Yahoo-вская ерунда по серверной оптимизация мне кажется высосанной из пальца! Куда важнее клиентская оптимизация! Взять паттерн 10px/10px замостить им весь документ (а мостить возможно долго придётся), потом навестить всяких box-shadow и jQuery.animation... И можете не волноваться за серверную оптимизацию - пользователь вряд ли вернётся!

Если вы про плагины/советы от Yahoo по ускорению загрузки, то эти советы "детский сад", по стравнению с оптимизацией, проводимой мировыми ИТ брендами на своих сайтах. Важнее клиентская оптимизация? Оо Во-первых - это и есть клиентская оптимизация, во-вторых: их нельзя ставнивать в этом плане... они разные...

"а мостить возможно долго придётся" - не уверен, что понял смысл сказанного... сами придумали? можете кинуть пруф?

Edited April 19, 2012 by Viper

[Viper]

Размер - чем меньше тем лучше, формат - в данном случае PNG8 или GIF (в зависимости от того, что меньше весит, может вообще JPG). Вырезаем маленький кусок (без фанатизма конечно), для данной текстуры подойдет, скажем, 30х30. Потом в фотошопе юзаем filter -> other -> offset с половинными значениями (для 30х30 ставим 15х15) и смотрим видно ли швы. Если швы видно, юзаем healing brush или patch tool, и замазываем швы. Профит.

Добавлю по поводу форматов:

GIF, PNG8 - если мало цветов, не нужна тень с прозрачностью, нету градиентов. Основные форматы для иконок на сайтах ( но не всегда ).

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

PNG24 - где нужна четкость и прозначность. Лучший вариант, где нужен читабельный текст на изображении. Много плюсов, но, относительно, Очень большей размер изображения на выходе.

П.С. Если стремишься в будущем работать, например, в том же Яндексе - фанатизм необходим Но для "обычных" сайтов - это, да, безсмысленно, если не делаешь "для себя", так сказать...

[alexandr_v-vich]

Viper, Спасибо за ответы. Не всё прочитал, правда, но верю, что ответы пригодятся, пока отвлёкся на другое, позже перечитаю))

[Vin]

Между прочим, png-24 часто бывает гораздо экономичнее, чем png-8 — фотошоп при сохранении для web подскажет. А ещё есть несколько утилит для оптимизации png, например PNGout, OptiPNG, иногда можно вес изображения уменьшить в два раза без заметных глазу потерь.

[SelenIT]

Отлично (правда, медленно, но результат стоит ожидания) сжимает PNGшки Color Quantizer.