Идет загрузка

Рецепт создания цветовой схемы для разработки сайта.

Фишки Next Generation CMS, ngcms ninjah бложек / 24 апреля 2011

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

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

Создание основы.
c01.jpg (54.33 Kb)Создаем в ФШ новый файл (ctrl+n) 640*480. Первый слой будет служить нам фоном нашего будущего дизайна, поэтому создаем новый слой.

c02.jpg (41.89 Kb)
Выбираем (M), задаем фиксированный размер 300*300, заливаем его любым цветом. Должно вот так получиться.
c03.jpg (38.2 Kb)Создаем новый слой по верх нашего квадрата 300*300, тоже с фиксированным размером в 150*150, заливаем его другим цветом и выравниваем по отношению к первому квадрату сверху и слева.
Вот так
c04.jpg (51.97 Kb)Далее по аналогии создаем еще три слоя и в них повторяем те же действия. Т.е. у нас получиться 4 квадрата 150*150 в отдельных слоях.

Создание слоев для получения градаций цветов.
c05.jpg (46.43 Kb)Создаем группу и называем ее «Градация», в ней создаем новый слой.
Зажав (ctrl) кликаем по слою, где лежит наш первый большой квадрат 300*300, чтобы он выделился, и заливаем это выделение белым.

c06.jpg (34.71 Kb)Создаем новый слой сверху, зажимаем (ctrl) и кликаем по первому белому квадрату, далее заходим Select / Modify /Contract и ужимаем это выделение на 50.
c07.jpg (54.33 Kb)Заливаем новый уменьшенный на 50 квадрат и заливаем его тоже белым цветом.

c08.jpg (.63 Kb)Зажимаем (ctrl), чтобы появилось выделение, переходим на первый квадрат и вырезаем это выделение (del), после этого ставим этому слою прозрачность на 0.

c09.jpg (62.63 Kb)У ужатого квадрата, во втором слое прозрачность ставим 20.
c10.jpg (62.33 Kb)Осталось создать последний третий квадрат. По аналогии, создаем третий слой, заходим в и ужимаем его тоже на 50. Заливаем его белым, выделяем его и вырезаем это выделение из второго слоя. После этого ставим на третьем слое прозрачность 35 или 40

Ну вот почти готово, сталось немного привести ее в порядок.

c11.jpg (30.51 Kb)Сверните группу со слоями «Градация» и перейдите к первому слою с цветным квадратом. Создайте над ним новый слой, зажмите alt и кликните между слоями, чтобы сделать маску.
Должно получиться, как на картинке.
c12.jpg (42.96 Kb)Проделайте тоже самое и для оставшихся трех цветных квадратов.
c13.jpg (55.78 Kb)В принципе болванка для создания цветовой схемы сайта готова. Заливайте слои любыми цветами, которые вы планировали использовать при создании дизайна и получайте сразу градацию цветов.

Если вы легко все сделали и никаких трудностей у вас не возникло, то советую сделать в psd файле с болванкой сетки для сайта, сделать тоже такую папку. Чтобы все было в одном флаконе :))

Хороший совет!!!

27.09.2011 - 15:29   easmik   

RocketBoy
Рекомедую качнуть вот этот psd, там уже есть готовая болванка для цветовой схемы. Просто заливаешь 4 слоя нужными цветами и все готово :)
http://rocketvip.ru/blog/psd_setka_dlya_sozdaniya_shablona_saita.html

27.09.2011 - 17:57   RocketBoy   

Облако тэгов
Бесплатные шаблоны Next Generation CMS
 
Архивчик
Привет!
Этот блог я сделал, чтобы выкладывать новые шаблоны для Next Generation CMS (ngcms), поделиться моими трюками, возможно секретами по созданию сайтов, но по прошествии времени, я решил делиться всем, что мне понравилось за последние дни в сети. RocketVIP