Анимация Веб-дизайн Тюнинг Обработка фото Спецэффекты Эффекты текста Видеоуроки Фотомонтаж Планшет
Скачать кисти Скачать PSD Книги Программы Скачать стили Скачать шрифты



Кисти Photoshop

Бесплатно 2 GB для ваших коллажей и фотографий

Аудит, бухгалтерский учет - компания Интеллаудит

Форум Новости Конкурсы Интервью Рисование Сайт-шоу Обзоры Партнеры Реклама Контакты Гостевая
Словарь терминов Горячие клавиши Установка Фотошопа
Большая прогулка Винни Пуха (анимация)
Большая прогулка Винни Пуха (анимация)


Красивые губки
Красивые губки


Ведьма
Ведьма


Плавленый текст
Плавленый текст


Улучшаем форму груди
Улучшаем форму груди

» » Создание Web-страниц (часть 2) - подготовка изображений
Купить полезную книгу: Самоучитель Photoshop CS6. Официальная русская версия (+DVD)

Популярные уроки по фотомонтажу

Создаем татуировку в Photoshop  Тучи и молнии  Как нарисовать слезу в Photoshop  Фотомонтаж  Девушка-кошка (фотомонтаж)  Фотомонтаж: меняем фон  Козабака  Фотомонтаж: создаем ангела с крыльями  Ангельские крылья: способ 2  Эффект Шарингана

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

: Веб-дизайн  : 13 октября 2007  : 99335  

Объявления:

На предыдущем занятии мы создадили эскиз страницы сайта в 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 на следующем уроке. До скорого и удачи вам друзья!

 Читайте также:

Если у Вас есть вопросы, можете задать их на нашем форуме.

Получайте новые уроки на e-mail:

Буду благодарен, если поделитесь ссылкой на эту страницу в одном из сервисов:

Присоединяйтесь к нам в Facebook (просто нажмите кнопку "Мне нравится"):

Понравился материал? Присоединяйтесь к нам в Твиттере @globatornet .



Популярные уроки по анимации

Создание анимированного GIF баннера  Анимация - блики на предметах  Прикольный анимированный аватар  Подмигивающая фотография  Сверкающий текст (анимация)  Анимация  Блеск драгоценностей (анимация)  Сверкающая одежда (анимация)  Новогодняя история (анимация)  Сверкающее око (анимация)

Популярные уроки по обработке фото

Кадр из старого фильма  Как изменить цвет глаз в Фотошопе  Перекрашиваем волосы в Фотошопе  Реалистичные капли на стекле  Историческая кисть в Photoshop  Как сделать коллаж в Adobe Photoshop  Как сделать макияж в Adobe Photoshop  Загар в Adobe Photoshop  Эффект миниатюры в Photoshop  Простой, но интересный эффект

Популярные уроки по спецэффектам

Африканские страсти и инструмент Перо  Реалистичная поверхность воды  Предчувствие весны (рисуем девушку)  Рисуем космос  Зима- морозные узоры на стекле  Урок по инструменту Перо  Абстракция  Использование стилей в Adobe Photoshop  Делаем рамки для фото  Обложка для диска

Популярные кисти Photoshop

Кисти-надписи  Сакура  Кисти-молнии  Кисти-бабочки  Кисти-морские обитатели  Кисти-цветы  Кисти-сердечки  Кисти Vector Curves  Кисти-бутылки  Кисти Magic Sparkle Lines

 





4istoe3oloto - победительница конкурса Подводный мир
4istoe3oloto - победительница конкурса "Подводный мир"


FatCat - победительница конкурса рисунка Кукольный мастер
FatCat - победительница конкурса рисунка "Кукольный мастер"


Айрена - победительница фотоконкурса Свет
Айрена - победительница фотоконкурса "Свет"


Яндекс цитирования Rambler's Top100
Уроки Photoshop
Вы можете установить кнопку Globator.net на своем сайте или блоге, скопировав этот код:

О проекте

Globator.net- это подробные уроки по Фотошопу, художественные кисти, красивые стили и полезные шрифты. Здесь вы найдете оригинальные уроки Фотошоп по следующим тематикам: фотомонтаж, обработка фото, анимация, спецэффекты, виртуальный тюнинг автомобилей и текстовые эффекты.

Подписка на обновления сайта

Вы можете получать обновления globator.net на e-mail или в свой RSS-ридер.


Всего подписчиков:Рассылка 'Уроки Фотошоп на Globator.com'
В случае перепечатки материалов сайта активная гиперссылка на Globator.net обязательна
Уроки Фотошоп, кисти, стили и шрифты на Globator.net©   2006-2014
Design by Globator