Форма входа

mvcreative

Старая форма входа

  • Страница 1 из 1
  • 1
Модератор форума: BSide  
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » Рисуем дизайн сайта. (урок фотошопа ;))
Рисуем дизайн сайта.
forumzaДата: Суббота, 13.11.2010, 20:34 | Сообщение # 1
Спикер
Группа: Пользователи
Пользователь №: 363
Сообщений: 233
Награды: 3
Репутация: 11
Статус: оффлайн

НАчнем создание шаблона

Создайте новый документ (Ctrl + N) с размерами 1200 х 1550 пикселей. Установите цвет переднего плана на # FFFFFF цвета и фона на # e3e3e3 затем выберите Gradient Tool (G). С выбранным инструментом Градиент изменения градиента типа отражение градиента

Перетащите градиент от примерно на полпути вниз холста, как только вы добавили градиент добавить немного шума, перейдя в "Filter> Noise> Add Noise".

Ваш фон должен выглядеть следующим образом

Название и слоган
-----------------------------------
Выберите "Инструмент" (Т), чтоб в верхней части холста добавить название сайта и слоган используя нужный шрифт

добавить следующие стили слоя на свой слой название сайта.

Вы должны иметь что-то вроде этого

Создание окна поиска
-------------------------------------
Выберите "Rounded Rectangle Tool (U) с радиусом 20px

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

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

Продолжение ниже

Добавлено (13.11.2010, 19:58)
---------------------------------------------
Вы должны иметь что-то вроде этого

Внутри в окне поиска, добавить небольшое увеличительное стекло с текстом "Поиск ..." рядом с ним.

Создание текстовой навигации
------------------------------------------

Выберите "Инструмент" (T), затем введите ваш элементов навигации, я пошел за курсивом Verdana. Как только вы набрали его цвет первым пунктом навигация в другой цвет

Как только вы сделали навигацию добавьте тень с настройками ниже

На слой под вашим слоем текста добавить прямоугольник с закругленными углами с помощью "Rounded Rectangle Tool (U). После добавления прямоугольник цвета в белый цвет (# FFFFFF), затем добавить маленький треугольник с помощью пера инструмент в нижней середине прямоугольника

Создание области содержимого
-------------------------------------------

Выберите "Rounded Rectangle Tool (U) с радиусом 20px затем перетащите из большой белый # FFFFFF прямоугольник выходит на холсте.

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

Далее, выберите "Elliptical Marquee Tool" (M), то вытащить эллипса же ширины содержание коробки, но пусть эллипса над повесить на первое место по smidge

Fill (G) эллиптического выделения с черным цветом (# 000000) на слой под слоем содержание коробки, а затем установите непрозрачность на 20%. Наконец размытия эллипса, перейдя в "Filter> Blur> Guassian Blur", установите размытие сумму до 3 пикселей. Вы должны иметь что-то вроде этого.

Повторите эти шаги для нижней части содержания окна

Популярные Содержание
------------------------------------------
Продолжение далее bag

Добавлено (13.11.2010, 20:34)
---------------------------------------------
Выберите "Rounded Rectangle Tool (U), то вытащить черный (# 000000) прямоугольник внутри содержимого коробки. Радиус прямоугольника должна быть около 5-10px

Внутри новый черный прямоугольник добавить например признакам изображения. Как только вы выбрали изображение, которое вы можете легко поместить изображение внутри прямоугольника, выбрав "Edit> Paste Into" и "Правка"> "Специальная вставка> Вставить в" Если вы используете CS5

В настоящее время собираются превратить нашу признакам изображения, так это выглядит, как JQuery слайд-шоу. Выберите "Rectangular Marquee Tool" (M), то сделать выбор в нижней части изображения признакам

Fill (G) выделение черным цветом (# 000000) затем установить прозрачность до 25%. В настоящее время собирается удалить избыток прямоугольника, как мы не хотим ее пределами нашей признакам изображения. Загрузите выделение вокруг признакам прямоугольника изображения оставляя черный слой прямоугольник выделен. Теперь переходим к "Select> Inverse" и нажмите удалить ключ.

Внутри прозрачного прямоугольник, который у нас теперь есть, собираются добавить текст. Выберите "Text Tool" (T) и используя большой жирный шрифт добавить название вашей статьи Показывая. После того как вы добавили название статьи добавить немного мета информацию о времени и дате и т.д. ...

Сейчас на правой стороне Избранная статья собираются добавить простой список других избранных статей. Начните с 4 маленьких прямоугольников в верхней части друг с другом следующие стили слоя добавил

Вы должны иметь что-то вроде этого

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

Создание статьи блога
--------------------------------------

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

Для этого макета я пошел на подобный взгляд использовании текстовых блоков, каждый блок текста есть мета-данные для этой статьи.

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

Тогда я прикончил макет, добавив некоторые средства массовой информации, видео и фотографии и т.д. ...

The Footer

Завершите макет, добавив простые текстовые колонтитул с какой-нибудь социальной иконки для хорошей мерой

Перевод от - Admin6532,
Имеется псд этого сайта кому надо пишит передам


Бесплатно Скачать ADOBE PHOTOSHOP CS 5



Сообщение отредактировал nDiviD - Суббота, 13.11.2010, 19:49
 
вверх
footballmasterДата: Суббота, 13.11.2010, 21:58 | Сообщение # 2
Спикер
Группа: Пользователи
Пользователь №: 191
Сообщений: 207
Награды: 9
Репутация: 43
Статус: оффлайн
Хороший урок. Для средних пользователей. Скинь ссылку на источник (в хайд и спойлер) может там найду интересные для себя уроки (за одно проверю правильность перевода).



Кто хочет заказать у меня дизайн сайта стучите в Skype: alexandru_lampard ; ICQ: 614017088
 
вверх
forumzaДата: Воскресенье, 14.11.2010, 02:27 | Сообщение # 3
Спикер
Группа: Пользователи
Пользователь №: 363
Сообщений: 233
Награды: 3
Репутация: 11
Статус: оффлайн
smile оо ЭТОГО Я НЕ ПОМНЮ ! иЩИ УРОКИ ДЛЯ ФОТОШОП НА GOOGLE.CO.UK ОН ТАМ В ПЕРВЫ СТРОЧКАХ ( ТОЧНЕЙ В ПЕРВЫХ 5 КАЖЕТСЯ)


Бесплатно Скачать ADOBE PHOTOSHOP CS 5

 
вверх
rybkasДата: Воскресенье, 14.11.2010, 17:27 | Сообщение # 4
Шептун
Группа: Пользователи
Пользователь №: 22
Сообщений: 36
Награды: 0
Репутация: 0
Статус: оффлайн
А че дальше делать с созданным изображением???... Простите за незнание таких простых вещей...
Как превратить это в шаблон? С помощью какого ПО?
 
вверх
nDiviDДата: Воскресенье, 14.11.2010, 17:54 | Сообщение # 5
Чего так орать?
Группа: Проверенные
Пользователь №: 21
Сообщений: 614
Награды: 11
Репутация: 39
Статус: оффлайн
rybkas, ручками. Верстаем, верстаем


Web-create пати uNiceGroup =) Порно бесплатно!
 
вверх
creARTsДата: Воскресенье, 14.11.2010, 17:57 | Сообщение # 6
-Wicked aka wise
Группа: Проверенные
Пользователь №: 78
Сообщений: 307
Награды: 10
Репутация: 16
Статус: оффлайн
rybkas, Нарезка в PS,потом верстка либо дивами(div) либо таблицами,щас восновном верстают дивами,более легкий дизайн,и грузится быстрей smile
 
вверх
forumzaДата: Понедельник, 22.11.2010, 17:02 | Сообщение # 7
Спикер
Группа: Пользователи
Пользователь №: 363
Сообщений: 233
Награды: 3
Репутация: 11
Статус: оффлайн
Если надо могу дать ПСД на фотошоп более качественный диз будит и там всё разбито )


Бесплатно Скачать ADOBE PHOTOSHOP CS 5

 
вверх
ToKcuKДата: Среда, 22.12.2010, 22:07 | Сообщение # 8
Шептун
Группа: Пользователи
Пользователь №: 521
Сообщений: 36
Награды: 0
Репутация: 0
Статус: оффлайн
Хороший урок! Спасибо.. Лови + в репу))
 
вверх
forumzaДата: Понедельник, 03.01.2011, 16:14 | Сообщение # 9
Спикер
Группа: Пользователи
Пользователь №: 363
Сообщений: 233
Награды: 3
Репутация: 11
Статус: оффлайн
ToKcuK, cool Спасибо!


Бесплатно Скачать ADOBE PHOTOSHOP CS 5

 
вверх
PainfullДата: Воскресенье, 09.01.2011, 15:47 | Сообщение # 10
Молчун
Группа: Пользователи
Пользователь №: 585
Сообщений: 8
Награды: 0
Репутация: 0
Статус: оффлайн
smile неплохо)))
 
вверх
lex3654Дата: Четверг, 21.04.2011, 16:46 | Сообщение # 11
Авы нет
Молчун
Группа: Пользователи
Пользователь №: 1083
Сообщений: 1
Награды: 0
Репутация: 0
Статус: оффлайн
Отлично мне понравилось
 
вверх
wa1BДата: Вторник, 29.05.2012, 19:28 | Сообщение # 12
Авы нет
Молчун
Группа: Пользователи
Пользователь №: 1774
Сообщений: 2
Награды: 0
Репутация: 0
Статус: оффлайн
Спасибо за урок. smile
 
вверх
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » Рисуем дизайн сайта. (урок фотошопа ;))
  • Страница 1 из 1
  • 1
Поиск: