15:41 

Оранжевый сайт для дизайн-студии

web-design
В творчестве, как и любви, легче остановить мгновение, чем самого себя. (Леонид С.Сухоруков)
Website Design Studio



1. Создаем новый документ 800x600 пикселей

2. Далее выбираем инструмент Rectangle Tool (U) и рисуем прямоугольник такого же размера как и наш документ.

3. Переходим к свойству нашей фигуры Blending Options>Gradient Overlay и выставляем следующие параметры







4. Далее рисуем линию белого цвета как на рисунке



5. Выбираем инструмент Pen Tool (P) и рисуем несколько треугольников





В параметрах нарисованных нами треугольников выставляем Fill 0%, и переходям к свойствам слоев Blending Options>Gradient Overlay



Свойства градиента



Получаем следующее:



6. Выбираем инструмент Rounded Rectangle Tool (U) и рисуем новую фигуру предварительно выставив радиус в 35 пикселей. Тут будет располагаться основной контент



Далее начнем рисовать панель для меню сайта. Берем Rounded Rectangle Tool (U) и рисуем фигуру с радиусом 30 пикселей в нутрии нашего контента. Далее выбираем инструмент Rectangle Tool (U) и при нажатой клавише ALT рисуем прямоугольника как показано на рисунке.



Переходим в свойства слоя Blending Options>Inner Shadow



Blending Options>Gradient Overlay



Параметры градиента:





7. По аналогии с заготовкой к меню сайта мы рисуем нижнее часть (футер).



Переходим в параметры слоя: Fill 0%
Blending Options>Inner Shadow



Blending Options>Color Overlay





8. Далее мы нарисуем панельку для ленты новостей. Для этого мы опять возьмем Rounded Rectangle Tool (U) с радиусом 35 пикселей и рисуем в левой части контента прямоугольник светло серого цвети (#F6F6F6). Далее при нажатой клавише ALT, внутри нашего новосново прямоугольника мы рисуем 2 прямоугольника и получаем



9. Теперь на нашей панели для меню мы нанесем несколько декоративных линий. С помощью Rectangle Tool (U) рисуем небольшой прямоугольнику белого цвета. Затем его нужно немного наклонить (CTRL+T)





Далее клонируем наш прямоугольник несколько раз и равномерно распределим копии по все длине панели:



Затем небольшой совет, растеризуйте все наши клонированные прямоугольники и объедините их в один слой (CTRL+E). После этого выставляем прозрачность слоя Fill 20% и Blending Mode-Overlay



10. Приступим к кнопкам. Возьмем Rounded Rectangle Tool (U) белого цвета с радиусом 20 и рисуем как показано на рисунка



В свойствах слоя выставляем Blending Options>Inner Shadow





Далее рисуем следующую кнопочку, тем же Rounded Rectangle Tool (U) с радиусом 20.

В свойствах слоя выставляем следующие параметры:
Fill 20%
Blending Options>Inner Shadow



Blending Options>Gradient Overlay







Копируем наш последний слой, нажимаем CTRL+T и делаем его немного уже. В свойствах слоя выставляем:
Fill 20%
Blending Options>Inner Shadow



Blending Options>Gradient Overlay







Далее копируем полученную кнопочку несколько раз



11. Берем Rectangle Tool (U) и рисуем вот такую полоску



В свойствах слоя выставляем Blending Options>Drop Shadow



Blending Options>Gradient Overlay







Пишем название:





Blending Options>Drop Shadow





Забиваем текст в кнопочки:
Кнопка с белым фоном "home page"



Остальные кнопки:



И вот что получаем:



Вставим заголовки в основном контенте и новостной колонке:





Далее подготавливаем «РЫБУ» (текст в контенте)





Даты в новостной колонке





Контакты:





В свойствах слоя выставляем:





С помощью инструмента Rounded Rectangle Tool (U) с радиусом 5 пикселей рисуем пару плашек для работ из портфолио.





На место этих плашек вставляем пару картинок для портфолио

Конечный результат:



Желаю удачи

Автор: Adobe Tutorialz
Перевод: Beavis
Источник

@темы: Web-дизайн, Уроки

URL
Комментарии
2009-03-27 в 16:06 

Госпожа Ия-тян
Сюрреализм это я! Ибо я один способен развивать его дальше! С.Дали
Здорово! Красиво, лаконично, Понятно:) Спасибо:)

2009-03-27 в 16:06 

web-design
В творчестве, как и любви, легче остановить мгновение, чем самого себя. (Леонид С.Сухоруков)
Госпожа Ия-тян
Вам спасибо :buddy:

URL
2009-03-27 в 21:30 

Azura Daedra
I amar prestar aen, han mathon ne nen, han mathon ne chae a han noston ne 'wilith
эх....если бы так же просто и легко было делать с нуля:))))
если бы идея генерировалась в голове так же по пунктам)))) как быстро бы сайты и всё остальное делалось.....:))
А так ведь всё время основное уходит на придумывание, каким бы цветом то и то сделать, как бы что здесь придумать и там-то нарисовать :write: :))))
я уж молчу про шрифты.....хотя может это только у меня одной так :alles:

2009-03-28 в 05:47 

запросы в гугле определяют сознание ©
Azura Daedra, так в любой творческой профессии. ))) Но хороший пример может подкинуть хорошую идею и ускорить процесс.

2009-03-28 в 11:54 

Госпожа Ия-тян
Сюрреализм это я! Ибо я один способен развивать его дальше! С.Дали
Azura Daedra - если трудно "с листа" придумать дизайн сразу в среде разработки то сначала сделай цветными карандашами наброски на листике бумаги! Мне всегда помогает:) набросок никто не увидит зато это поможет визуально оценить композицию цветовые сочетания и так далее:)

2009-03-28 в 13:52 

Azura Daedra
I amar prestar aen, han mathon ne nen, han mathon ne chae a han noston ne 'wilith
mahini точно:)
хотя часто, смотря разные примеры, свой может быть уже не "своим", а интерпретированным чужим дизайном. Но хотя почему бы и нет :)))

Госпожа Ия-тян
Я так всегда делаю....сначала рисую, затем схематично подбираю какие то элементы в самом граф.редакторе. :)
Хотя бывает так....что дизайн "рождаеться" из какой-нибудь кнопки или иконки))) - увидишь или сделаешь какой то элемент, и вдруг в момент в голове рождаеться сам дизайн, причем весь полностью, до мелочей:))))

2009-03-28 в 21:36 

запросы в гугле определяют сознание ©
Azura Daedra, не обязательно интерпретированным. Просто глаз падает на какую-нибудь штучку и в голове стреляет. Пример как наводка работает. Это то же сто и дизайн "рождаеться" из какой-нибудь кнопки или иконки))) - увидишь или сделаешь какой то элемент, и вдруг в момент в голове рождаеться сам дизайн, причем весь полностью, до мелочей:))))

2009-03-28 в 23:26 

Azura Daedra
I amar prestar aen, han mathon ne nen, han mathon ne chae a han noston ne 'wilith
mahini ну да... :shy: согласна:))
по-всякому вобщем то бывает. Но конечно здорово вообще смотреть чужие работы. Учиться у других тоже нужно:))))

Комментирование для вас недоступно.
Для того, чтобы получить возможность комментировать, авторизуйтесь:
 
РегистрацияЗабыли пароль?

Сундук WEB-дизайнера

главная