Все уроки Фотошоп

Есть вопрос? Задайте здесь и сейчас!

Форум Регистрация Выслать активацию Восстановить пароль Дополнительно Файлы Видео Галереи Справка  
Перезагрузить страницу Страна Фотошопия Adobe Photoshop. Фотошоп и все, с ним связанное >> Обучение Adobe Photoshop >> Уроки Adobe Photoshop >>

  Урок Photoshop для начинающих     Создание Web-страниц (часть 2) - подготовка изображений

Перезагрузить страницу Страна Фотошопия Adobe Photoshop. Фотошоп и все, с ним связанное >> Обучение Adobe Photoshop >> Уроки Adobe Photoshop >>

  Урок Photoshop для начинающих     Создание Web-страниц (часть 2) - подготовка изображений


 
Опции учебника
Создание Web-страниц (часть 2) - подготовка изображений

Предыдущий учебник Создание Web-страниц (часть 2) - подготовка изображений Следующий учебник
Опубликовал(а) Gostemilov
12.08.2015
Тема урока Фотошоп
Сайтостроение
Создание Web-страниц (часть 2) - подготовка изображений

На предыдущем занятии мы создадили эскиз страницы сайта в Adobe Photoshop. И пока, мысленно, представили каким образом макет нашего сайта может быть представлен в табличном виде. Теперь мы займемся расстановкой направляющих на эскизе нашей страницы в Adobe Photoshop. Те кто уже скачал файл отсюда и не поленился его открыть, увидели вероятно, что там направляющие уже расставлены. Их можно не трогать - правильно они там стоят ... Для работы над данным уроком РАБОТАЙТЕ С КОПИЕЙ ФАЙЛА. Храните где-то оригинал, чтоб не пришлось скачивать еще раз.

А зачем мы расставляем эти самые направляющие? А затем, что по этим самым линиям мы будем разрезать нашу страницу на отдельные кусочки - картинки чтобы потом вставить их в ячейки таблицы которую мы создадим в Macromedia Dreamweaver. А теперь - как и почему именно так проставлялись направляющие на эскизе. И какими соображениями мы при этом руководствовались.


1. Вот так выглядит наш эскиз в Adobe Photoshop (если убрать направляющие).

2. Выбираем инструмент Move Tool (V)

Кликните для увеличения

3. Теперь выключаем слои Text и Banner

Кликните для увеличения

4. Объединяем (сливаем вместе) видимые слои. Идем в пункт меню Layer - Merge Visible (Shift+Ctrl+E)

Кликните для увеличения


5. Начинаем расставлять направляющие. Включаем если не включен режим Rulers. Пункт меню View - Rulers ( Ctrl+R). Что это такое - смотрите на рисунок выше. Кто не знает направляющие расставляются так: подводим выбранный нами ранее инструмент Move Tool (V) туда примерно куда указывает оранжевая стрелочка (на саму линейку белого цвета), нажимаем и удерживая левую кнопку мыши двигаем ее (мышь) следом потянется линия. Это направляющая и есть.

Кликните для увеличения


Данная направляющая кстати даст нам возможность вырезать для вставки в таблицу картинку - футер

6. Теперь ставим направляющие для меню и хедера. Ставьте направляющие точно по краям рисунков! Увеличьте рисунок и затем расставляйте. В конце концов все должно выглядеть так, как на картинке ниже. Всмотритесь - отдельные части нашего макета находятся как бы в таблице, разделительными линиями которой, являются расставленные нами направляющие.


7. Приступаем наконец то к нарезке картинок! Копируем отдельные области макета, и вставляем их в новые отдельные файлы. Вот примерно так все должно выглядеть. Когда вы разрежете, скопируете и вставите ....


8. Теперь создайте для картинок которые мы будем сохранять в форматах gif и jpg ОТДЕЛЬНУЮ ПАПКУ и назовите ее используя ЛАТИНСКИЕ БУКВЫ (например imgsite). Сохранять файлы нужно так: File - Save For Web !

9. Сохраняем Header.psd - как header.jpg в уже созданную нами ОТДЕЛЬНУЮ ПАПКУ, Footer.psd - как footer.gif туда же.

10. Закрываем файлы Footer.psd и Header.psd. и сам эскиз. А вот с меню мы еще поработаем.

11. Расставим направляющие и сохраним кусочки меню общим числом 6 штук в ту самую ОТДЕЛЬНУЮ ПАПКУ в формате gif (например home.gif, about.gif, и.т.д)

Кликните для увеличения


Вот так результаты нашего урока выглядят у меня. Нечто подобное должно было получиться и у вас.

Кликните для увеличения


Ну вот и все на сегодня ! В итоге у нас теперь есть папка с нарезанными картинками - заготовками. Эти картинки мы и будем использовать для создания нашей web - страницы в Macromedia Dreamweaver на следующем уроке. До скорого и удачи вам друзья!
__________________
Мы такая нация, мы и Гитлера до самоубийства довели

Если деньги мерить кучками, то у меня ямка

Запомните, дети, кофе и виски - это "Он", а "Оно" - это оно и Министерство образования Российской Федерации
Опубликовал(а)
Аватар для Gostemilov
Администратор
Он малахольный
Регистрация: 07.09.2007
Адрес: Россия, Москва. 100 метров до МКАД
Возраст: 54
Сообщений: 92,016
Вес репутации: 10
Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима


Рекомендовать другим

Копирайт
Автор урока
MasterOK
Оригинал урока
globator.net/webdesign/144-sozdanie-web-stranits-2-podgotovka.html
Ответить в теме


Опции учебника

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.
Trackbacks are Выкл.
Pingbacks are Выкл.
Refbacks are Выкл.


Похожие темы
Название учебника Автор учебника Раздел Числу комментариев Последнее сообщение
  Урок Photoshop для начинающих     Создание Web-страниц (часть 5)- гиперссылки Gostemilov Уроки Adobe Photoshop 0 12.08.2015 18:51
  Урок Photoshop для начинающих     Создание Web-страниц (часть 4) - хостинг Gostemilov Уроки Adobe Photoshop 0 12.08.2015 18:49
  Урок Photoshop для начинающих     Создание Web-страниц (часть 3) - верстка в Dreamweaver'e Gostemilov Уроки Adobe Photoshop 0 12.08.2015 18:48
  Урок Photoshop для начинающих     Создание Web-страниц (часть 1) - эскиз web-страницы Gostemilov Уроки Adobe Photoshop 0 12.08.2015 18:32
Создание фрактальных изображений, Рисуем абстракции в Photoshop Gostemilov Необработанные уроки Photoshop 2 21.06.2015 11:30

###
Социальные сети
Группы
Основные разделы
Скачать и поделиться

Новости Фотошопии
Подписаться письмом
Дополнительно

Текущее время: 20:35. Часовой пояс GMT +2.


удаленная проверка сервера uptime российских хостеров
Rambler's Top100


.
Locations of visitors to this page

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc. Перевод: zCarot
vBulletin Optimisation by vB Optimise (Reduced on this page: MySQL 14.29%).