var a=0;
function scrollTop(s)
{
var b=a+s;
document.getElementById('dock').scrollTop=b;
a=b;
if(b==document.getElementById('dock').scrollHeight) {
clearInterval(t);
}
}
function scrollBottom(s)
{
var b=a-s;
document.getElementById('dock').scrollTop=b;
a=b;
if(b==0) {
clearInterval(t);
}
}
function goRight(s)
{
t=setInterval('scrollBottom(2);',20);
}
function goLeft(s)
{
t=setInterval('scrollTop(2);',20);
}
сайтыдизайнмультимедиа
Обновление сайта
Подготовка изображений для сайта
1. Визуальный редактор
2. Форматирование текста
» Обучаем
Подготовка изображений для сайта
Этот урок поможет Вам обуздать такого зверя, как Photoshop. Если у Вас есть сайт с системой управления, или в Ваши обязанности входит обновление сайта, рано или поздно Вы столкнетесь с проблемой обработки фотографий.
Итак, перед нами Photoshop. На первый взляд он действительно страшен. Масса инструментов и функций, и первое ощущение - для того чтобы этим пользоваться, понадобиться наверное года три!
Доля правды в этом есть. Чтобы стать "фотошопопрофессионалом", работать с ним действительно нужно не менее трех лет, но как показывает наша практика, освоить его можно при большом желании месяца за три. А выучить пару маневров можно и за один урок, чем мы с Вами сейчас и займемся.
1. Размер изображения
Маленькая оговорочка: эта часть касается только фотографий, которые будут вставлены на сайт при помощи визуального редактора. Фотографии, загружаемые в модули "Каталог", "Галерея", "Новости" и прочие, при загрузке автоматически подгоняются под нужные размеры.
Может Вы уже сталкивались с такой проблемой: вставляем изображение на сайт, сохраняем, смотрим – О УЖАС!!! Он стал безобразно широким! Его просто расперло!
Будем разбираться.
Мы с детства привыкли, что размеры измеряются в сантиметрах, поэтому привычный размер фотографии для нас: 3х4см, 10х15см, и так далее.
На экране компьютера же картина совсем другая. Точнее размеры картинки.
Здесь всё измеряется в Пикселях (pixel).
Пиксель - это точка. Множество разноцветных точек (пикселей) составляют изображение на экране. Соответственно чем больше пикселей в нашей картинке, тем большую часть экрана она занимает.
Пиксель принято обозначать как "px".
Теперь ближе к делу.
Итак, допустим, у нас есть свеженькая фотография, только что из 8-ми мегапиксельного цифрового фотоаппарата. Загружаем её на компьютер, открываем в Фотошопе, и сразу заходим в меню (сверху) Image/Image Size... Image Size переводится как Размер изображения. Видим такое окошко:
Здесь нам нужны только верхние два поля: Width– ширина изображения, Height – высота изображения.
Для того, чтобы поменять размер, вписываем необходимую ширину (или высоту) и жмем кнопку Ok . Но для начала убедимся что включены галочки ConstrainProportions (Сохранить пропорции) и ResampleImage (Пересчитать изображение).
Теперь о размерах. Для того чтобы поместить изображение на страницу сайта, рекомендуется уменьшить её до размера не больше 500px по ширине.
Размер подбираем на глаз, как ему будет приятно. После уменьшения изображения, идем в меню View/Actual Pixels, чтобы отобразить изображение в реальном размере (пиксюлечка к пиксюлечке). Если картинка не влазит в свое окошко, растягиваем его за нижний правый уголок, или два раза кликаем по синей полоске окошка (как и во всех окнах Windows).
Хочется добавить, что изображения можно как уменьшать, так и увеличивать, но различие в том, что при уменьшении качество не теряется, при увеличении - теряется. Поэтому при подборе необходимых размеров отменяйте предыдущее действие одновременным клавиш Ctrl+Z.
Вот и все дела!
2. Ориентация изображения
У людей может быть множество ориентаций, у изображений только две – горизонтальная и вертикальная. Горизонтальная – это когда ширина больше высоты, горизонтальная соответственно наоборот.
Когда мы фотографируем, мы вертим фотоаппарат как хотим, но он к сожалению не понимает наших творческих изысков, и все фотографии сохраняет горизонтальной ориентации.
Наша задача – восстановить истинную ориентацию.
Открываем неправильную фотографию в Фотошопе, идем в меню Image/Rotate Canvas, выпало ещё одно меню, из которого нам необходимы два пункта: 90° CW (Вращать на 90° по часовой стрелке) и 90° CCW (Вращать на 90° против часовой стрелки). Вроде все понятно, лишних слов не нужно. Напомним, что неправильное действие можно отменить одновременным нажатием клавиш Ctrl+Z.
3. Коррекция по тонам и цвету
А сейчас мы заставим Фотошоп сделать наши фото привлекательней.
Первый шаг – добавить контраст. Конечно если это нужно.
Меню Image/Ajustments/Auto Contrast – программа откорректировала изображение по тонам.
Если изображение было недостаточно контрастным, оно стало лучше.
Второй шаг – откорректировать цвета.
Меню Image/Ajustments/Auto Color – программа откорректировала изображение по цветам.
Изображение стало более красочным.
Вот и все действия.
Конечно, мы рассказали Вам об автоматических настройках, то есть Фотошоп делает с фотографией то, что считает нужным. Иногда он ошибается, все-таки он руководствуется не личным мнением, а алгоритмами, заложенными в нем.
Для более тонкой настройки существует масса других функций, рассказывать о которых мы сейчас не станем, чтобы не нагружать Вас лишней информацией.
3. Сохранение изображения для сайта
Мы уже научились работать над изображениями, теперь дело за малым – сохранить.
Сохранять мы конечно умеем, но есть нюанс. И имя ему – Интернет.
Будем говорить по простому: чем меньше объем картинок, тем быстрее они загружаются, поэтому наша задача – добиться минимального объема нашего изображения.
Для этого в Фотошопе есть специальный режим сохранения. File/Save for Web... – открывается большое окно с кучей настроек, но нам нужно совершить всего три действия.
2 пункт – качество сжатия подбираем на глаз, чтобы картинка имела приличный вид. Обычно выставляется от 50 до 100.
