Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
10 / 10 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
1

Ретина или как быть с картинками?

01.05.2014, 00:28. Показов 918. Ответов 19
Метки нет (Все метки)

вобщем у меня ступар с картинками верстаю сайт, а картинки все слишком большие, например для шапки картинка 2560х784 хотя на шаблоне в два раза меньше как минимум?

Может это для ретиновских экранов? если да как быть? как использовать ? картинка ниже в пример тут она уменьшилась даже))
0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Миниатюры
Ретина или как быть с картинками?  
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
01.05.2014, 00:28
Ответы с готовыми решениями:

Как правильно использовать закаченую картинку, ретина/не ретина дисплей
Всем доброго времени суток, как не странно возник вопрос и не могу найти полный ответ на него....

Как быть с картинками?
Опишу коротко проблему: сайт висит на хостинге, места 3 гб и все бы хорошо, но на сайте постоянно...

Мусор или вторая жизнь. Или как быть с этим?
Привет ребята. Подскажите что можно оставить, а что под замену? Видеокарту планирую GTX1060-1070. ...

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

19
Администратор
11987 / 5316 / 266
Регистрация: 05.04.2011
Сообщений: 14,088
Записей в блоге: 2
01.05.2014, 10:57 2
sendxt, подгоняйте под размер шаблона. А еще лучше - сразу подгоните весь psd под нужный размер.
0
10 / 10 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
01.05.2014, 11:07  [ТС] 3
Taatshi, как это лучше сделать ? может инструменты есть какие?
0
Администратор
11987 / 5316 / 266
Регистрация: 05.04.2011
Сообщений: 14,088
Записей в блоге: 2
01.05.2014, 11:14 4
sendxt, самим фотошопом. К примеру у Вас шаблон должен быть шириной 1000px. Макет с отступами вместе 5000, отступы по 1000 пикселей.

Считаем. Вся ширина - 5000, отступы - 1000, основная часть 4000. Нам нужно, чтоб основная часть была 1000 - в 4 раза меньше. Тогда отступы будут 1000/4 - 250px. Итого весь макет будет 1250px.

В фотошопе снимаем выделение со всех слоев и инструментом Размер картинки выставляем ширину 1250px.

Фотошоп подумает, повисит немного если psd огромный - и преобразует макет в нужный нам размер. Сохраняем в новый файл и с ним работаем.

Никогда таких действий не производите с оригиналом. Он должен быть неприкосновенным. На всякий пожарный случай
1
10 / 10 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
01.05.2014, 11:17  [ТС] 5
Taatshi, и походу и не с оригиналом таких действий проводить не буду, по крайней мере на данном этапе-))
0
Администратор
11987 / 5316 / 266
Регистрация: 05.04.2011
Сообщений: 14,088
Записей в блоге: 2
01.05.2014, 11:40 6
Зря) Каждую картинку точно подогнать невозможно. Когда столкнетесь с необходимостью к примеру порезать градиент на кусочки - куда Вы денетесь
0
10 / 10 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
01.05.2014, 13:00  [ТС] 7
Taatshi, а можно ли так сделать чтобы картинка маштабировалась по экрану? потому что если я размер экрана делаю 50% фон тогда реально становится такой какой доолжен бы быть?

есть ещё картинка голова девушки, её должен пристоковать к фону, если он как щас 2560пх и 100% не стыкуится
0
Миниатюры
Ретина или как быть с картинками?  
Администратор
11987 / 5316 / 266
Регистрация: 05.04.2011
Сообщений: 14,088
Записей в блоге: 2
01.05.2014, 13:02 8
sendxt, сделайте скрин всего макета пожалуйста. Не обязательно во всю высоту-ширину, можно маленький - расположение блоков посмотреть.
0
10 / 10 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
01.05.2014, 13:12  [ТС] 9
вот что я сделал как выглядит http://function.vv.si/ , и как на картинке
0
Миниатюры
Ретина или как быть с картинками?  
Администратор
11987 / 5316 / 266
Регистрация: 05.04.2011
Сообщений: 14,088
Записей в блоге: 2
01.05.2014, 13:51 10
sendxt, Вам нужно спросить у заказчика одну вещь. КАК должен выглядеть фон браузера за пределами шаблона на широкоэкранках. Диз у вас только на середину.

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

Уточните этот момент. В зависимости от ответа и будут рецепты - диаметрально противоположные по сути.
1
10 / 10 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
01.05.2014, 15:39  [ТС] 11
Taatshi, это адаптивный дизайн, вроде со всем нормально всё укладываются, там есть картинки для retin(ы), и есть нормальные они как-бы всё ок подходять, вот только с фоном остается.

Что за рецептик может быть с ним? как-то его может можно сделать чтобы он под экран адаптировался в плане например под мой экран он отображается так как надо при маштабировании 50%

Добавлено через 1 час 38 минут
Вопрос решён
0
Администратор
11987 / 5316 / 266
Регистрация: 05.04.2011
Сообщений: 14,088
Записей в блоге: 2
01.05.2014, 15:51 12
sendxt, и как?
0
10 / 10 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
01.05.2014, 18:30  [ТС] 13
Taatshi, нашёл psd ещё с 1280px вырезал от туда картинку как бы нормально. Но я себе все равно не ответил на вопрос нафига там уже нарезан такой большой фон был? Ретина? Я первый раз адаптивную вёрстку делаю, вопросов по ходу жесть скока появляется))

Добавлено через 2 часа 32 минуты
опять возвращаюсь назад к этой теме оказалось нефига я не решиль этот вопрос)

http://function.vv.si пример того что щас вышло

делал из расчета чтобы получилось так

но есть ещё папка full hd там выглядит чуть иначе, незнаю что значит и для чего full hd дается.


ну и вопрос в шапке и голове которую к ней надо пристыковывать. И в том какой всё таки фон использовать для header, есть 1280 шириной и в два раза больше
0
Администратор
11987 / 5316 / 266
Регистрация: 05.04.2011
Сообщений: 14,088
Записей в блоге: 2
02.05.2014, 12:15 14
sendxt, если сайт должен быть полностью адаптивным - то есть на всех мониторах смотреться одинаково - вам нужно начинать с начала все стили переписывать.

Первое, что я делаю в таких случаях - устанавливаю скрипт, выставляющий размер шрифта в зависимости от разрешения экрана. И все размеры для всех элементов прописываю в процентах и em.

Иначе добиться полного соответствия дизайну невозможно.

В Вашем случае картинка будет обрываться по краям на широкоэкранках. Иначе никак.
0
10 / 10 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
02.05.2014, 12:54  [ТС] 15
Taatshi, со шрифтами понятно... Вот с фономом не понимаю каким образом стилизовать его в моём случаи, если есть два варианта 1280пх и 2560пх , или надо фон под каждое расширение экрана и через медиа при изменениях экрана менять его? или просто ставить большую картинку и фон в 100% указывать и он подгонять будет под экран?
0
Администратор
11987 / 5316 / 266
Регистрация: 05.04.2011
Сообщений: 14,088
Записей в блоге: 2
02.05.2014, 12:59 16
Смотря какая ширина сайта у Вас выбрана за основную. Под нее и подгоняйте. Если ее сделать бэкграундом - берите картинку побольше и ставьте бэку позиционирование center top - она автоматом будет обрезаться на узких мониторах.
0
10 / 10 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
02.05.2014, 13:03  [ТС] 17
Taatshi, ну если бы просто только фон шапки, так ещё голова эта должна прилегать, состыковыватся с шапкой, вот в этом всё творчество)) 2 элемента этих слить так)
0
Администратор
11987 / 5316 / 266
Регистрация: 05.04.2011
Сообщений: 14,088
Записей в блоге: 2
02.05.2014, 13:17 18
Я бы сделала

1) Вариант с извращениями: голову бэком для боди, а розовую фигню бэком для дива.

2) Логически обоснованный вариант: зачем их разделять? Сделайте их общей картинкой.
0
417 / 379 / 163
Регистрация: 03.01.2013
Сообщений: 966
02.05.2014, 15:36 19
sendxt,
Можете выложить все файлы макета?
0
10 / 10 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
02.05.2014, 17:42  [ТС] 20
monochromer, много весит 170мб

Добавлено через 10 минут
http://www.sendspace.com/file/cow1ei
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
02.05.2014, 17:42

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Здоровье глаз. Как теперь выбрать монитор? Глянец или матовый, или в чем можеть быть дело?
Друзья, добрый день. Закупили на работу новые мониторы LG 27MP57HQ (IPS, без ШИМ). Начали...

Samsung или Sony? Быть или не быть
Добрый день, комрады! Жизненная необходимость подтолкнула меня к покупке портативного помощника по...

Триггер или Процедура? Быть или не быть?
Господа Форумчане. Помогите пожалуйста советом. Собственно вопрос вот в чем :Есть база данных для...

Игровой софт «подвергся нападению»: Дума решает быть ему или не быть
Вот такой Законопроект № 443560-6 — О внесении изменений в статью 16 Федерального закона «О защите...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.