Нарезка фотографии в Photoshop для последующей верстки.
В этом уроке я расскажу как изображение сделанное в Photoshop разрезать для последующего переноса в шаблон.
Изображение, которое будет использоваться представлено ниже.
Открываем изображение в Photoshop. C помощью инструмента "Срез" выделяем части, как показано на изображении ниже.
Обратите внимание там где стоит "галочка", она показана для того, чтобы Вы сделали срез.(см.рис ниже)
Я увеличил изображение до 800% для того, чтобы сделать этот срез.
Срезы делаются для правильного выделения и разрезания фотографии.
Теперь сделаем фоновые изображения для шаблона.
Выделите в верхней части шапки самую темную чать
Нажмите "Файл\Новый (или Ctrl + N)"
В появившемся окне введите параметры:
ширина, высота - 1 точка
Содержимое - Белый
Нажмите "Выбор\Все" (Или Ctrl + A)
Нажмите "Правка\Копировать (или Ctrl + C)"
Нажмите "Правка\Вставить (или Ctrl + V)"
Убедитесь в том, что слой вставился поверх фона.
Перейдите в "Уровень\Стиль уровня\Оверлей цвета..."
В появившемся окне нажмите на цветной квадрат:
В палитре выберете полностью черный цвет - (#000000)
Нажмите "ОК"
Сохраните изображение в формате ".jpg", для этого нажмите "Файл\Сохранить для Web..."
В появившемся окне выберете параметры:
Формат - JPEG
Качество - Maximum, на 100%
Нажмите кнопку Save и выберете папку для сохранения. Присвойте имя файлу "black1X1"
Выберете инструмент "Прямоугольное выделение" в верхней части меню поставьте параметр "Новый Выбор"
Выделите логотип с копируйте его. После чего создайте новый документ и не изменяя параметров ширины и высоты вставьте его.
В этом изображении необходимо убрать надпись, делается это просто: выделяем любую черную область, копирует и вставляем ее поверх текста, изменить размеры можно нажав кнопки "Ctrl + T", или через "Правка\Свободное преобразование."
Теперь необходимо применить градиент логотипу, для этого:
Выберете самый верхний слой в списке слоев и перейдите в "Уровень\Соединить вниз (или Ctrl + E)"
После соединения слоев перейдите в "Уровень\Стиль уровня\Оверлей градиента"
В появившемся окне измените угол на 180 градусов и нажмите 1 раз на изображение градиента рядом с надписью "Градиент:" для его редактирования.
В появившемся окне введите параметр "0" для прозрачности 2 цвета. Передвиньте ползунок прозрачности ближе к первому цвету:
Измените второй цвет (белый) на другой. Например так:
Примечание. 2-ой Цвет в градиенте может быть подобран по вкусу. Главное, чтобы 1 цвет был абсолютно черным.
Вот, что получилось у меня в результате:
Сохраните файл логотипа таким же образом, как вы сохраняли "black1x1", Присвойте изображению название "Logo"
Примечание! Сохраняйте все изображения в одной папке!
Теперь выделите небольшой кусок полосы под логотипом.
Скопируйте её и нажмите "Файл\Создать"
В появившемся окне не изменяйте высоту, измените ширину на "1 точку"
Вставьте изображение в новый документ и сохраните его под названием "Line_001"
Теперь выделите нижнюю часть нижней полосы и проделайте туже операцию - ширина должна быть "1 точка" название - "Line_002".
Теперь займемся изображением под левым меню.
Выделяем его, копируем, создаем новый документ, и не изменяя размеров ширины и высоты, вставляем в него скопированное изображение. После этого сохраняем под названием "Salon".
Теперь займемся линией-разделителем. Увеличиваем изображение до 800% И выделяем линию. После этого копируем её, создаём новый документ, вставляем и сохраняем под именем "Line_003"
Осталось создать ещё один квадрат 1x1 который будет основным фоном документа.
Делаем это так же, как делали черный квадрат. Сохраняем файл под именем "Fon"
