05.01.08 в рубрике Уроки Photoshop

Как выглядит стандартная rss-кнопочка, думаю, знают все. Мы же сегодня будем делать урок фотошоп, результат которого несколько необычный вариант, который, скажу вам по секрету, можно использовать и для других кнопок, была бы фантазия.

Если вы берётесь за создание дизайна сайта, то должны понимать, что ему необходимы уникальные иконки, дизайн и кнопки. А иначе он будет смотреться пресно, убого и схоже с тысячью другими сайтами.

Открываем фотошоп и приступаем к выполнению урока:

1. Создаем новый документ произвольных размеров и с помощью инструмента «Custom Shape Tool» [U] рисуем фигуру
Что там дальше?..

Popularity: 1%

30.12.07 в рубрике Уроки Photoshop

Предлагаю Вашему вниманию еще один урок фотошоп по созданию кнопок для веб-сайтов. Не удивительно, что мы так часто обращаемся к этой теме, ведь создание сайтов — моя основная задача. Но в отличие от прошлых, этот урок очень прост и доступен любому новичку.

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

Приступим:
1. Создаем новый документ, с помощью инструмента «Прямоугольник со скругленными краями» (Rounded Rectangle) рисуем фигуру

2. Изменяем настройки слоя

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

Параметры градиента для обводки.

3. Смотрим результат

4. Добавляем надписи и блики
(как делать блики я расписывал в прошлом уроке по созданию кнопки).

Готово

Автор: Найкрис Кроули (блог о веб-дизайне).
При использовании материала ссылка на сайт обязательна

Popularity: 1%

25.12.07 в рубрике Уроки Photoshop

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

1. Создаем документ, размеры значения не имеют, я выбрал 640×480. Заливаем его цветом #080713

2. С помощью инструмента [U] рисуем фигуру

3. Применяем настройки в Стиле Слоя (Layer Effects)

Результат:

4. Кисточкой (Brush)[B] белого цвета, диаметром в 3 пикселя, рисуем линии приблизительно на одном расстоянии.

Можно отмерять и высчитать точно, но я, как видите, не стал.

5. И для этого слоя настраиваем стили.

Вышло такое вот

6. Добавим вот такие шарики с обеих сторон.

Как их сделать? Гораздо проще, чем мебель из массива. С помощью инструмента «Эллипс» [U], удерживая Shift, рисуем круг и применяем к нему настройки, как и в пункте 3, только меняя размер тиснения в зависимости от диаметра шарика.

Выделяем зону на шарике с помощью «эллипса» [М] и заливаем ее градиентом [G] от белого к прозрачному.

Ставим Непрозрачность(Fill) на 7%, жмет Ctrl+T и слегка поворачиваем слой. Шарик готов. Таким путем делаем и остальные.

7. Дублируем слой с прямоугольником, у которого скругленные углы, который мы создали в самом начале урока. Применяем к нему Фильтр- Рендеринг- Блик (Filter-Render-Lens Flare). Выскочит меню с предложением растрировать слой, жмем «Аха». В появившемся окошке выбираем «Начало ролика» и снова жмем «Да».

Я уменьшил Непрозрачность (Fill) до 15%

8. Создаем новый слой.

Делаем выделение «эллипс» [M] и заливаем его белым цветом. Удерживая Ctrl, жмем на слой с прямоугольником, который расположен ниже. Этим действием мы выделим контур прямоугольника. НО! Активным по-прежнему должен оставаться слой с белым эллипсом. Нажимаем Ctrl+Shift+I и жмем Delete. Результат.

С помощью все того же «Эллипса» [M] делаем такое выделение

и снова Delete. Непрозрачность(Fill) слоя на 3%

9. Дублируем слой с фоном и применяем к нему Фильтр- Рендеринг- Блик (Filter-Render-Lens Flare). Подставляем его в угол меню, удаляем лишнее и уменьшаем Непрозрачность (Fill) до 70%.

10. Теперь нам нужно изменить настройки двух шариков, ближайших к этому блику.

Для маленького:

Параметр Тиснение с прежними настройками. Для того, что крупнее:

Вот собственно и все. Вот так выглядит наше меню:

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

Автор: Найкрис Кроули (блог о веб-дизайне).
При использовании материала ссылка на сайт обязательна

Popularity: 1%

06.12.07 в рубрике Уроки Photoshop

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

Создаем новый документ. Фон и размер значения не имеют.

Делаем заготовку.

С помощью инструмента «Прямоугольник со скругленными краями» (Rounded Rectangle) рисуем такую фигуру. У меня радиус закругления 5 пикселей.

Теперь, используя «Эллипс» и удерживая Shift, рисуем круг, который налаживается поверх прямоугольника. Приблизительно так: Что там дальше?..

Popularity: 100%

20.11.07 в рубрике Дизайнерские Штучки

Спонсор поста : Вьетнам (добавить ссылку)

Обращаясь в студию веб-дизайна или к фрилансеру дабы заказать создание дизайна сайта, заказчик часто не знает, какой сайт ему нужен. Проблема в том, что в терминологии, когда обсуждаются виды сайтов (типы сайтов), происходит путаница. Заказчик говорит об одном, а подразумевает совершенно другое. Идет бурное обсуждение проекта, а потом, в один прекрасный момент выясняется, что нужен был совершенно другой вид сайта.

Я собираюсь облегчить жизнь заказчикам и пролить свет на классификацию сайтов. Сайты делятся на следующие категории (виды):

1. Сайт-визитка — обычно состоит из нескольких страниц и имеет уникальный, но простой и функциональный дизайн; идеально подходит для компаний, которые хотят разместить информацию о себе и своих услугах в Интернете; основные разделы сайта: «О компании», «Продукция» или «Услуги», «Прайс-листы», «Контактная информация»; сайт-визитка используется предприятиями, организациями и частными лицами.
Что там дальше?..

Popularity: 1%