Главная
страница 1
Если вы ничего не знаете про создание дизайна сайта в фотошопе, то этот небольшой урок для вас. Итак, то что нам понадобится это фотошоп. Я использую Photoshop CS3 Extended 10 версии. Давайте разберем на простом примере как создать дизайн для сайта. Урок этот, конечно, далеко не единственный вариант создания дизайна сайта. Но все же для новичка очень даже сойдетhttp://baxtop.ru/izobrazheniya/smile3.gif. Создание дизайна также зависит от вашей фантазии и способностей в фотошоп.

Запускаем программу фотошоп. Затем идем в меню Файл - новый, либо вызываем комбинацией клавиш CTRL + N. Ширину возьмем 750 пикселей, высота пусть тоже будет 750 (если текст на странице не будет помещаться, то высота будет увеличиваться сама по себе, поэтому она не столь важна). Разрешение 72 пикс/дюйм. Жмем ОК.



начало создания дизайна сайта

Перед нами появляется наша рабочая облать. Далее что нам потребуется - это Линейки. Для того, чтобы их включить, нужно зайти в меню Просмотр - Линейки (CTRL + R).

Слева и сверху от рабочей области должны появиться две линейки. Цепляем верхнюю и тянем направляющую на нашу область, чтобы образовалась шапка нашего сайта, потом вторую, чтобы получился низ сайта (подвал) и также левую линейку, чтобы получилась область для меню.

установка линеек в фотошопе

Далее выбираем Инструмент для Прямоугольного выделения



инструмент для прямоугольного выделения

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



выделение шапки сайта пунктиром

Затем нужно создать новый слой. Для этого заходим в пункт меню Слой - новый - слой (SHIFT + CTRL + N). Слой переименовываем в gradient английскими буквами.

Теперь мы сделаем градиентную заливку выделенной области. Выбираем основной цвет, пусть он будет такой (код цвета 26561f)

градиентная заливка в фотошопе

...и цвет фона (код цвета 50de53)



градиентная заливка в фотошопе

 

Выбираем инструмент Градиент. В верхней панели свойств выбираем тип градиента - от основного к фоновому.



инструмент градиент

Протягиваем линию так, как показано на рисунке и получаем следующую градиентную заливку.

Чтобы линия проходила строго вертикально или горизонтально нужно удерживать клавишу SHIFT.

заливка шапки градиентом

градиентная заливка шапки

Теперь сделаем низ сайта , или так называемый подвал. Сначала выделим его инструментом для прямоугольного выделения, создадим новый слой, переименуем его в gradient1 и проведем линию снизу вверх удерживая SHIFT как показано на рисунке.



заливка подвала градиентом

градиентная заливка подвала

Добавление картинки в дизайн сайта

Итак, двигаемся дальше. У нас уже есть шапка и низ сайта с градиентной заливкой, теперь добавим картинку...

Большой выбор картинок вы можете найти в поисковике выбрав раздел "Картинки" вместо поиска.

добавление картинки в дизайн сайта

Чтобы добавить изображение просто перетягиваем картинку из папки на компьютере в программу, она появится в новом окне, перетаскиваем его на наше окно с рабочей областью предварительно выбрав инструмент Перемещение (Стрелка). Также у вас появится новый слой, переименовываем его в komp.



http://www.baxtop.ru/izobrazheniya/sshot-35.jpg

После того как изображение появилось у нас на рабочей области, перемещаем его в правый угол шапки.



http://www.baxtop.ru/izobrazheniya/kar2.jpg

Как мы видим , изображение у нас выходит за пределы шапки. Идем в пункт меню Редактирование - Трансформирование - Масштабирование. По краям и углам появились маленькие квадратики, зажимаем SHIFT, цепляем нижний левый квадратик и уменьшаем размер изображения до тех пор, пока высота картинки не будет совпадать с высотой нашей шапки.



http://www.baxtop.ru/izobrazheniya/kar3.jpg

Часть рисунка у нас выходит за пределы направляющей, поэтому можем эту часть удалить выделив ее инструментом для прямоугольного выделения. Можно конечно и затереть Ластиком, тем самым сразу убрав резкий переход от черного к зеленому. Но это ваш выбор, смотрите как вам удобнее.



http://www.baxtop.ru/izobrazheniya/kar4.jpg

Наша картинка нивкакую не вписывается в наш градиент - будем исправлять. Для этого заходим в меню Изображение - Коррекция - Цветовой тон/Насыщенность, и подбираем цвет. В данном случае я использовал функцию Тонирование.



http://www.baxtop.ru/izobrazheniya/kar5.jpg

Срочное изготовление печатей, гербовые печати штампы. Печать брошюр, визитки срочно.

И наконец убираем резкий переход Ластиком. Для этого выбираем ластик, делаем размер побольше, а жесткость поменьше. Чтобы ластик шел ровно нужно удерживать SHIFT). , вот что получается у меня.

http://www.baxtop.ru/izobrazheniya/kar6.jpg

! При работе с конкретным слоем не забывайте его выделять перед работой, нажав на его иконку, помните, что при редактировании слоя другие слои не затрагиваются.

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


С первым изображением мы разобрались, теперь добавим второеhttp://baxtop.ru/izobrazheniya/smile3.gif. Получится новый слой, его назовем kot.

http://www.baxtop.ru/izobrazheniya/kot1.jpeg

Здесь избавимся от белого фона, оставим только котенка. Выбираем инструмент Быстрое выделение, после чего перемещаем мышь вокруг котенка, предварительно зажав левую клавишу мыши, пока он не будет обведен вот таким образом.



http://www.baxtop.ru/izobrazheniya/sshot-2.jpg

Затем щелкаем правой кнопкой мыши по картинке и выбираем пункт меню Вырезать на новый слой, который УДАЛЯЕМ. В итоге у нас остается один котенок. Перемещаем его в левый угол.



http://www.baxtop.ru/izobrazheniya/sshot-3.jpg

...и уменьшаем размер так же как мы это делали с предыдущим рисунком (Редактирование - Трансформирование - Масштабирование)



http://www.baxtop.ru/izobrazheniya/sshot-5.jpg

Как вы уже заметили, тон котенка изменился, заходим в пункт меню Изображение - Коррекция - Цветовой баланс, меняем значения.



http://www.baxtop.ru/izobrazheniya/sshot-4.jpg

В итоге имеем следующее.



http://www.baxtop.ru/izobrazheniya/sshot-10.jpg

Усложнение дизайна сайта добавлением картинки


Теперь перейдем на новый этап и займемся усложнением нашего дизайна. В этом нам поможет третья картинкаhttp://baxtop.ru/izobrazheniya/smile3.gif. При этом образуется новый слой, который мы назовем shema. Его расположим под слоями kot и komp.

http://www.baxtop.ru/izobrazheniya/sshot-16b.jpg

http://www.baxtop.ru/izobrazheniya/sshot-12.jpg

Расположим картинку так, как на рисунке и уберем лишнее, выделив прямоугольным выделением.



http://www.baxtop.ru/izobrazheniya/sshot-13.jpg

Заходим в меню Изображение - Коррекция - Цветовой тон/Насыщенность, и подбираем цвет, чтобы он не конфликтовал с нашим дизайном.



http://www.baxtop.ru/izobrazheniya/sshot-15.jpg

Дальше нам нужно уменьшить прозрачность нашей схемы, значит меняем значение прозрачности на 10%



http://www.baxtop.ru/izobrazheniya/sshot-16a.jpg

Вот что у нас получилось



http://www.baxtop.ru/izobrazheniya/sshot-34.jpg

Подтираем Ластиком слегка видимые резкие края схемы



http://www.baxtop.ru/izobrazheniya/sshot-17.jpg

http://www.baxtop.ru/izobrazheniya/sshot-18.jpg

http://www.baxtop.ru/izobrazheniya/sshot-36.jpg

Изменение контрастности изображения. Работа с текстом

Теперь сделаем наше изображение с компьютером более контрастным. Заходим в пункт меню Изображение - Коррекция - Уровни. Здесь меняем верхнее левое значение на 38.



http://www.baxtop.ru/izobrazheniya/sshot-19.jpg

Что мы делаем дальше...дальше мы поработаем с текстом, сделаем Логотип сайта, т.е. напишем его название. Берем инструмент Горизонтальный текст. Выбираем дополнительные параметры такие как шрифт, размер шрифта, цвет.



http://www.baxtop.ru/izobrazheniya/sshot-20.jpg

http://www.baxtop.ru/izobrazheniya/sshot-21.jpg

Дальше ставим курсор в место написания и пишем прямо по дизайну. При написании текста слой создается сам и имя дается автоматически.



http://www.baxtop.ru/izobrazheniya/sshot-22.jpg

Затем сделаем белый контур вокруг нашей надписи. Удерживая CTRL щелкните по иконке слоя с текстом, текст должен будет выделиться пунктиром, затем создаем новый слой, подписываем его contur и обязательно помещаем под слой с текстом.



http://www.baxtop.ru/izobrazheniya/sshot-24.jpg

http://www.baxtop.ru/izobrazheniya/sshot-25.jpg

Потом идем в пункт меню Выделение - Модификация - Расширить, там выбираем расширить на 3 пикселя



http://www.baxtop.ru/izobrazheniya/sshot-37.jpg

Теперь выберем инструмент Заливка и зальем наш новый слой белым цветом. Вот результат.



http://www.baxtop.ru/izobrazheniya/sshot-38.jpg

Окна продаются здесь - пластиковые окна.

Добавим к нашей надписи тень. Заходим в пункт меню Слой - Стиль слоя - тень. Я оставляю значения по умолчанию и жму ОК.

http://www.baxtop.ru/izobrazheniya/sshot-39.jpg

Нарезка готового дизайна сайта в Photoshop


Ну что ж, с рисованием дизайна мы закончим и перейдем к нарезке дизайна. После нарезки дазайна мы получим html код и все нарезанные изображения. Для того, чтобы у нас не было больших графических областей нарежем дизайн на более мелкие части. Для этого проведем еще несколько направляющих как на рисунке.

http://www.baxtop.ru/izobrazheniya/sshot-27.jpg

Далее выбираем инструмент Раскройка



http://www.baxtop.ru/izobrazheniya/sshot-28.jpg

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



http://www.baxtop.ru/izobrazheniya/sshot-29a.jpg

Получилось восемь частей.



http://www.baxtop.ru/izobrazheniya/sshot-29.jpg

Потом идем в пункт меню Файл - Сохранить для Web и устройств... (ALT + SHIFT + CTRL + S). Откроется новое окно оптимизации.



http://www.baxtop.ru/izobrazheniya/sshot-30.jpg

В установках у меня стоят такие параметры.



http://www.baxtop.ru/izobrazheniya/sshot-31.jpg

Нажимаем сохранить, выбираем папку на компьютере (! создайте на диске D или E папку и назовите ее Yourcomp - это будет папка с вашим сайтом); пишем имя файла index. Тип файла: HTML и изображения, настройки оставляем по умолчанию и выбираем все фрагменты.



http://www.baxtop.ru/izobrazheniya/sshot-32.jpg

В общем работу в фотошопе мы практически закончили, но далеко фотошоп не откладывайте - он нам еще пригодится. Теперь у вас есть все изображения в совокупности составляющие ваш дизайн и html страница - наша заготовка, которую мы будем редактировать в Adobe Dreamweaver! (В папке Yourcomp лежит файл index.html и папка с изображениями images).




top.mail.ru

регистрация в ммм 2011

Доработка сайта в Adobe Dreamweaver CS3 после нарезки дизайна в фотошопе

Теперь пора перейти к работе с визуальным редактором Adobe Dreamweaver - мощнейший помощник в создании сайтов. Если вы всерьез решили заниматься созданием сайтов, то обязательно установите его себе.

Вот у нас уже есть заготовка сайта и теперь ее следует доработать в Dreamweaver. Хочу обратить ваше внимание, что если вы не знаете основ html, то дальше вы просто не сможете работать, поэтому не забегайте вперед и начните сначала - с изучения основ html. У меня на сайте есть раздел Основы языка html, а также в разделе электронные книги есть учебники по html, также есть замечательная книга moneymaster 1, с помощью которой вы создадите свою первую интернет-страницу и поймете всю суть html, после чего можете смело возвращаться к данному уроку http://baxtop.ru/izobrazheniya/smile3.gif.

Внимание! Если вы уже знаете основы html и имеете в своем арсенале программу Dreamweaver, с помощью которой и будете делать свой сайт, то рекомендую сразу же добавить сайт в программу (зарегистрировать). В дальнейшем вы все равно будете регистрировать сайт и чтобы осваивать все по порядку рекомендую перед началом работы добавить сайт в Dreamweaver.

Я использую Adobe Dreamweaver CS3. Запускаем программу, идем в Файл - Открыть. Заходим в созданную нами папку Yourcomp, открываем нашу html-страницу с именем index.html, которую мы сделали в фотошопе (если вы зарегистрировали сайт в дримвивере, то открыть файл намного проще).

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



http://www.baxtop.ru/izobrazheniya/dw.jpg

Для переключения между экранами используются кнопки на панели.



http://www.baxtop.ru/izobrazheniya/kn.jpg

Вот какой изначально код мы имеем





Безимени<span lang="en-us">-6



Безимени-6.psd) -->


























End ImageReady Slices -->


Смотрите также:
Урок для вас. Итак, то что нам понадобится это фотошоп. Я использую
313.16kb.
1 стр.
Урок 1 26 марта -1 апреля Одеяние, сотканное на небесах Урок 2 2-8 апреля От возвышения до падения
1013.49kb.
23 стр.
Выбор проекта Из истории Армянской кухни
138.94kb.
1 стр.
Урок, посвящённый 300-летию М. В. Ломоносову
65.08kb.
1 стр.
Заправка картриджа canon ep 27, ep 25, canon t для принтеров canon: lbp 3200, canon i-sensys mf 3220 series, canon LaserBase mf 3110, canon mf 3228, canon mf 3240,
24.43kb.
1 стр.
Что чемпионат грядущий нам готовит?
308.03kb.
1 стр.
Дорогие ребята! Мы приглашаем вас в путешествие. Это не простое путешествие, а кулинарное. А кто знает, что такое кулинария
56.54kb.
1 стр.
Урок литературного чтения в 3 классе. М. М. Пришвин
58.66kb.
1 стр.
Урок тема: «Урок письма»
94.05kb.
1 стр.
Лабораторная работа №6 Основы создания web-страниц средствами языка разметки гипертекста
98.67kb.
1 стр.
Урок эмоционального сопереживания для учащихся 5-6 классов «У войны недетское лицо»
220.33kb.
1 стр.
Вы должны родиться заново
758.69kb.
6 стр.