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);
}
                            

Подготовка изображений для сайта

Этот урок поможет Вам обуздать такого зверя, как Photoshop. Если у Вас есть сайт с системой управления, или в Ваши обязанности входит обновление сайта, рано или поздно Вы столкнетесь с проблемой обработки фотографий.

Итак, перед нами Photoshop. На первый взляд он действительно страшен. Масса инструментов и функций, и первое ощущение - для того чтобы этим пользоваться, понадобиться наверное года три!
Доля правды в этом есть. Чтобы стать "фотошопопрофессионалом", работать с ним действительно нужно не менее трех лет, но как показывает наша практика, освоить его можно при большом желании месяца за три. А выучить пару маневров можно и за один урок, чем мы с Вами сейчас и займемся.

1. Размер изображения

Маленькая оговорочка: эта часть касается только фотографий, которые будут вставлены на сайт  при помощи визуального редактора. Фотографии, загружаемые в модули "Каталог", "Галерея", "Новости" и прочие, при загрузке автоматически подгоняются под нужные размеры.

Может Вы уже сталкивались с такой проблемой: вставляем изображение на сайт, сохраняем, смотрим – О УЖАС!!! Он стал безобразно широким! Его просто расперло!

Будем разбираться.

Мы с детства привыкли, что размеры измеряются в сантиметрах, поэтому привычный размер фотографии для нас: 3х4см, 10х15см, и так далее.

На экране компьютера же картина совсем другая. Точнее размеры картинки.
Здесь всё измеряется в Пикселях (pixel).
Пиксель - это точка. Множество разноцветных точек (пикселей) составляют изображение на экране. Соответственно чем больше пикселей в нашей картинке, тем большую часть экрана она занимает.
Пиксель принято обозначать как "px".
Теперь ближе к делу.

Итак, допустим, у нас есть свеженькая фотография, только что из 8-ми мегапиксельного цифрового фотоаппарата. Загружаем её на компьютер, открываем в Фотошопе, и сразу заходим в меню (сверху) Image/Image Size...
Image Size
переводится как Размер изображения.
Видим такое окошко:


Здесь нам нужны только верхние два поля: Width – ширина изображения, Height – высота изображения.
Для того, чтобы поменять размер, вписываем необходимую ширину (или высоту) и жмем кнопку Ok . Но для начала убедимся что включены галочки Constrain Proportions (Сохранить пропорции) и Resample Image (Пересчитать изображение).
Теперь о размерах. Для того чтобы поместить изображение на страницу сайта, рекомендуется уменьшить её до размера не больше 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.

Готово!

 
 
 
Не пустим.
Вход только для клиентов.