 |
| ||||||||
|
|
|
|
|
Онлайн всего: 1 Гостей: 1 Пользователей: 0 |
|
| Главная » Файлы » уроки Photoshop » Дизайн |
Шаблон для бизнес сайта своими руками
| 18.12.2010, 12:44 | |
| В этом уроке я расскажу вам, как сделать бизнес шаблон с нуля. Итак, начнем Создайте новый документ с белым фоном размером 1200 x 1200 пикселей.  Хотя холст 1200 х 1200 пикселей, наш фактический макет будет только 850 пикселей в ширину. Он будет расположен в самом центре холста. Настраиваем линейки В верхнем меню выберите "view > new guide” и поставьте настройки, как на картинке  Повторите операцию, но уже с другими настройками  Должно получиться, как на картинке ниже  Создаем шапку сайта Выберите прямоугольное выделение  и создайте выделение высотой в 33 пикселя и шириной во все полотно. Заполните прямоугольник темно-серым. Выберите rounded rectangle tool 
и создайте маленький округлый прямоугольник, заполнить его тем же
цветом, что и прямоугольник высотой 33 пикселя. Расположите его к правой
линейке. Объедините 2 слоя с серыми прямоугольниками. К полученному слою добавьте градиент с настройками, как на рисунке ниже.  Выберите прямоугольное выделение
и создайте выделение ниже слоя с серыми прямоугольниками высотой 184
пикселя и длиной во все полотно. Заполните выделение любым цветом и
добавьте к нему градиент с настройками, как на рисунке. Должно получиться примерно так.  Добавьте название вашего сайта и слоган в шапку, а внутрь округлого прямоугольника номер телефона.  Создаем навигацию Выберите rounded rectangle tool
с радиусом в 20 пикселей и создайте выделение в 60 пикселей в высоту и
430 в длину, переместите выделение к правой линейке в шапке сайта. Заполните выделение любым цветом и примените к нему стили с настройками, как на картинках.    Должно получиться так  Заполните навигационную панель ссылками и разделителями. Добавление эффекта в шапку Создайте новый документ 600 x 600 пикселей с прозрачным фоном. Выберите elliptical marquee tool  и создайте круг, размером почти во все полотно. Заполните его черным. Измените fill opacity на 50%.  Добавьте обводку с настройками, как на картинке ниже.  Теперь создаем кисть. Выберите "edit > define brush preset” и сохраните кисть под названием "bokeh”. Вернитесь в наш макет и выберите только что сделанную кисть.  Откройте окно с настройками кисти (window > brushes) и выставите настройки, как на картинках ниже.     Создайте слой выше слоя с голубым фоном, выберите белый цвет и хаотично несколько раз кликните по нашей шапке. После поменяйте opacity слоя на 75% и добавьте размытие по гаусу на 2 пикселя.  Повторите этот процесс снова, но на это раз opacity ставьте большим, а размытие меньшим.  Создаем панель перед контентом Выберите rectangular marquee tool
и создайте выделение шириной во все полотно и высотой в 257 пикселей.
Заполните его любым цветом и применяем стиль с настройками, как на
картинке ниже. Должно получится как на картинке.  Сверху отступите 1 пиксель и нарисуйте линию в 1 пиксель цветом #a7c9de.  Выберите прямоугольное выделение
и выделите область размером высотой немного большей, чем серая панель, а
длиной в 850 пикселей(точно по линейкам) и залейте его голубым цветом. Выберите rounded rectangle tool с радиусом от 15 до 20 пикселей и создайте вертикальное выделение. Поместите получившуюся фигуру, как на картинке ниже. Создайте выделение и удалите часть голубого прямоугольника. Сделайте это, как слева, так и справа.  Поставьте градиент на голубой прямоугольник с такими настройками:  Ниже слоя с голубым и серым прямоугольниками по углам голубого прямоугольника нарисуйте круги с помощью elliptical merquee tool и залейте их цветом #72a8cb. Должно получиться, как на картинке. Заканчиваем с панелью, добавляя в нее картинку и текст.  Создаем контент Заполняем самый нижний слой. Выберите radial gradient с цветами #FFFFFF и #bee2f8 и залейте его, как на картинке.  Создайте форму сайдбара и переместите ее к правой линейке.  Добавьте стили к слою с сайдбаром.  Добавьте загнутый уголок.  Внутрь сайдбара добавьте свое содержимое.  Левее сайдбара работаем с текстом и его оформлением. Добавляем иконки.  Создаем подвал Выберите прямоугольное выделение и создайте прямоугольник в самом низу страницы с маленькой высотой и шириной во весь холст. Заполните его любым цветом и применяем стили.  Должно получиться, как на картинке ниже.  Финальный результат 
| |
| Просмотров: 507 | Загрузок: 0 | Рейтинг: 5.0/1 | |
| Всего комментариев: 0 | |
|
|
|
|
|
|
|