Пятница, 29.03.2024, 11:41
Найдется ВСЁ ГлавнаяМой профильРегистрацияВыходВход
Вы вошли как Гость | Группа "Гости"Приветствую Вас Гость | RSS
Меню сайта
Мини-чат
Наш опрос
Одни ли мы во Вселенной?
Всего ответов: 10
Статистика
Яндекс.Метрика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Форма входа
Google
 Базовые знания по CMS 
logo Drupal
Данный обучающий видеокурс посвящен созданию сайтов на базе движка Drupal версии 6.x. Изложенный самым простым и доступным языком, видеокурс принесет немалую пользу даже пользователю, ничего не знающему о создании сайтов. Хотя с другой стороны, те, кто уже знаком с движком Drupal, также найдут для себя массу интересной и полезной информации, так как Андрей Галямов и Алексей Попов авторы данного курса, открывая перед слушателем основы сайтостроения на Drupal, также обращают свое внимание на множество деталей.
Год выпуска: 2011
Продолжительность: около 5-ти часов.

Введение
 








как сделать дизайн сайта в фотошопе

(нажмите на картику для просмотра оригинала)

Если по какой то причине вы не хотите изучать урок и хотите простоскачать дизайн сайта в psd формате - кликайте сюда и качайте

Если вам интересно самому/ой научиться делать такие дизайны этот урок для вас. 

Для работы с дизайном нам понадобятся следующие файлы (скачать файлы одним архивом):

- фон с бабочками (для шапки сайта);
- шрифты;
- картинка c девушками;
- картинки для слайдера;
- иконки социальных сервисов;
- картинки для новостей;
- картинка рассылки;
- картинка счетчика.

Перед началом работы разделим наш дизайн на составляющие:

дизайн сайта в psd

1. Фон и подложка для сайта;
2. Шапка сайта (состоит из логотипа и текста, тематической картинки, фона и основного навигационного меню)
3. Слайдер, в просторечье карусель;
4. Поиск по сайту;
5. Основной контент (сами новости);
6. Сайдбар - боковая колонка (блок последние новости, блок социальные сервисы, блок подписка, блок голосование)
7. Пейжер - постраничная навигация по сайту;
8. Футер - нижняя часть сайта.

Приступим к созданию нашего дизайна в фотошопе.

Настройка фотошопа

1. Открываем фотошоп и создаем новый документ File→New(Файл→Новый или CTRL+N– в скобочках вместе с переводом буду указывать сокращения – проще говоря "горячие” клавиши - если такое действие будет встречаться в уроке еще раз, я буду использовать уже только горячие клавиши, которые позволяют экономить время в программе фотошоп).

В окошке я указал следующие параметры:

2. Перед началом работы произведем некоторые настройки фотошопа:

- устанавливаем в фотошопе цвет переднего/заднего плана по умолчанию (черный/белый), для этого жмем D на клавиатуре, так же можно изменять цвета местами с помощью клавиши X (есть так же соответствующие кнопочки внизу панели с инструментами).

- поставим галочку Auto-Select (Автоматически выбрать) и в выпадающем меню выбираю Layer (Слои) – данная настройка позволяет выбрать любой слой по клику на нем. 

- отобразим палитру History (История) идем Windows→ History  - с помощью этой палитры можно отменять предыдущие действия сделанные в фотошопе (также работают горячие клавишы Ctrl+Z и Ctrl+Alt+Z.

- включаем шкалу-линейку для документа, идем Views→Rules(Вид→Линейки или CTRL+R) должна появиться горизонтальная и вертикальная шкала-линейка.

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

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

Далее используя направляющих (щелкаете по линейке и тянете мышку вправо или вниз), размечаем места под основные элементы шапки:

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

Создание фона и подложки для сайта

3. Открываем файл с фоном File→Open (Файл→Открыть или CTRL+O, фаил fon.jpg из архива). Полностью выделяем наш документ - нажимаемCTRL+A. Делаем из нашего рисунка фон в фотошопе, идем во вкладочкуEdit→  Define Patter (Правка Определить узор), пишем название (я написал pattern).

бесшовный фон для фотошопа

сделать узор в фотошопе

4. Переходим на наш основной документ, идем Edit→Fill (ПравкаЗаливка, SHIFT+F5), в окошке выбираем Pattern, далее выбираем иконку с нашим патерном и нажимаем OK (заливаем наш фон созданным паттерном).

заливка документа фотошоп

заливка документа фотошоп

5. Теперь создадим белую подложку для нашего дизайна. Создаем новый слой, идем Layer→ New→Layer (Слой Новый Слой). Даем ему любое название и жмем OK. В палитре со слоями (Windows→ Layers, ОкноСлои, F7) должен появится новый слой.

новый слой фотошоп

новый слой

 

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

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

После этого берем инструмент прямоугольное выделение фотошоп Rectangular Marque Tool(Прямоугольное выделение, M) и рисуем прямоугольную область. 

(нажмите на картику для просмотра оригинала)

Заливаем наше выделение любым цветом берем инструмент Paint Bucket Tool (Ведро, G) или просто жмем Alt+Backspace. После этого щелкаем по слою два раза и попадаем в стили слоя. Я выставил такие настройки дляDrop Shadow (Отбрасывать тень) - цвет выбрал #5F1338:

создание тени

На этом с фоном закончим и перейдем к созданию шапки для сайта.

Делаем шапку для сайта

6. В начале создадим фон для шапки, из предложенного мною архива берем файл batterfly.jpg, открываем его в фотошопе File→Open. Теперь нужно перенести слой с картинкой в наш основной докумени. Для этого выбираем инструмент  Move Tool, выбираем слои с иконкой, кликаем правой кнопкой мыши и выбираем пункт Dublicate Layer (Копия слоя). 

В появившемся окошке вваодим название слою (я назвал fon-header), чуть ниже в поле Document  (Документ) выбираем документ в который нужно вставить слой, у нас woman-design-blogohelp.psd и нажимаем OK.

Слой должен вставиться ровно посередине документа.

Теперь передвинем наш слой в самый верх, это можно сделать 2 способами:

Первый способ: берем инструмент  Move Tool, кликаем по нашему слою с бабочками и не отпуская кнопку мыши еще нажимем клавишуShift (что бы слой двигался равно вверх) и после этого тянем мышку вверх и в нужном месте расспологаем наш слой.

Второй способ: выбираем слой с бабочками и слой с фоном в палитреLayers (F7)

После этого в настройках элемента  Move Tool , выбираем иконкуAlign top edges (Выравнить обекты по верхнему краю):

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

(нажмите на картику для просмотра оригинала)

Я специально сделал фон с бабочками больше белого фона, сейчас расскажу как удалить лишние края слева и справа. Теперь выбираем мышкой наш слой с бабочками и берем инструмент  прямоугольное выделение фотошоп Rectangular Marque Tool (Прямоугольное выделение, M) и рисуем прямоугольную область - выделяя наш ненужный кусок. После того как вы нарисовали область ее можно двигать клавишами Вверх, вниз, право, влево.

Далее просто нажимаем Delete и удаляем ненужную нам часть слоя. По анологии делаем с правым кусочком слоя. После этого для слоя fon-header, не снимая выделение со слоя, установим ему Opacity(Непрозрачность) в 20%.

7. Теперь сделаем небольшое затемние вверху шапки. Создаем новый слой- Shift+Ctrl+N. Даем ему любое название (у меня shadow-top) и жмемOK

После этого не снимая выделения со слоя shadow-top нажимаем Ctrl и не отпуская его кликаем по иконке слоя fon-header.

 

(нажмите на картику для просмотра оригинала)

После этого заливаем слой любым цветом - Alt+Backspace и идем в свойства слоя (кликаем два раза по слою). Снимае выделение, нажимаемCtrl+H. Далее выбираем свойство Gradient Overlay (Заливка градиентом) и ставим такие свойства:

Далее кликаем по полоске с градиентом и ставим такие цвета:

Теперь нужно слой с затемнением (shadow-top) поместить ниже слоя (fon-header). Жмем F7, выбираем нужный нам слой, хватаем его мышкой и переносим на порядок ниже (так же можно менять порядок слоев используя клавиши Ctrl+} - опустить слой на порядок или Ctrl+{ - поднять слой на порядок).

работа со слоями в фотошопк

 

Делаем логотип для сайта

8. Фон готов теперь давайте напишем наш текст и нарисуем логотип. Берем инструмент  Horizontal Type Tool (Горизонтальный текст, T) и щелкаем на шапке в том месте, в котором планируем написать надпись - у меня это WomanSite.ru, и пишем ее. Настройки для надписи я задал такие:

Если у вас на компьютере нет такого шрифта, то его можно взять из моего архива.

C помощью инструмента Move Tool (V), расположил текст в нужном мне месте.

Далее с помощью этого же инструмента  Horizontal Type Tool(Горизонтальный текст), выделим текст "Woman" и поменяем его цвет на другой #c9584a.

Точно так же поступим и с текстом "Site.ru", только цвет поставим#797878.

Сделаем обводку и тень нашему тексту. Кликаем два раза по слою и ставим галочки напротив Drop Shadow и Stroke (Обводка).

На этом с текстом все, переходим к логотипу.

9. Я хочу познакомить вас с основами рисования логотипов в фотошопе. Будем делать вот такой логотипчик (логотип сделан в виде завитушек, всего их 7 штук), на основе моего, который можно взять в заготовленном мною архиве. 

Открываем в фотошопе файл logo.jpg, переносим картинку логотипа в основной документ и расплагаем рядом с текстом.

Слою с логотипом задаем Opacity (Непрозрачность) - 25% и отключаем видимость некоторых слоев - что бы не мешали (убираем иконку глазика напротив слоя в палитре Layers, F7)

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

Кроме палитры Layers (F7), нам так же понадобится палитра Path (Пути). Что бы ее отобразить идем WIndows→Path (ОкнаПути). 

Далее с помощью лупы (инструмент  Zoom tool, Увеличитель , Z) приблизим нашу область перед текстом. Я увеличил на 500%.

Берем инструмент Pen Tools (Перышко, P) , поставим ему такие настройки:

 

Реклама Google
Календарь
«  Март 2024  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
25262728293031
Архив записей
Поиск
Друзья сайта
Мир ПК
Облако тегов
Copyright MyCorp © 2024Конструктор сайтов - uCoz