Отправляет email-рассылки с помощью сервиса Sendsay

WEB дизайн - начинаем с пикселя -баннеры, скрипты, шаблоны

Рассылка закрыта

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

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Июнь 2006   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
Александр

Статистика

2.334 подписчиков
-9 за неделю
←   Все выпуски   →

WEB дизайн - начинаем с пикселя -баннеры, скрипты, шаблоны 19.06.06


  Выпуск от 19.06.2006
Гостевая для Читателей
Содержание:
Новости
Градиентная поверхность - оформляем таблицы
Создаем графическое меню для сайта
Обзорка
Вращающийся футбольный мяч (Чемпионату Мира посвящается)
Контакты
НОВОСТИ

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

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

Уважаемая Людмила Симеоновна, как только я продолжу свою работу обязательно свяжусь с Вами, если Вас конечно не затруднит откорректировать мой текст. В свою очередь я обязуюсь, как-нибудь отблагодарить Вас. Ну а продолжение рубрики "Как начать зарабатывать ВЭБмастерам" ждите в следующих рассылках. Думаю все-таки я выберу время и поделюсь опытом.

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

В одном из своих выпусков писал про фиксированные таблицы и их оформление. Продолжим немного говорить про таблицы.

Вероятно Вам знакомы форумы phpBB, Invision Power Board, также думаю Вы знаете что такое скины для форума. Познакомьтесь с этим уроком и я думаю Вы уже сможете начинать делать постепенно свои скины, начать можно хотя бы с таблицы. Ну по порядку:

Создаем новое изображение 160x60. Заливаем его серым цветом, в данном случае это #C0C0C0 Еще нарисуем две пиксельных линии с помощью карандаша с шириной кисти 1px. Цвет кисти #696970.
Выделим ту часть, которая у нас внутри пиксельных линий с помощью Rectangular Marquee Tool (M) . Затем рисуем в светлых тонах градиент от цвета #95B8B8 к белому #FFFFFF.


Теперь добавим впуклость/выпуклость таким образом, создаем снова выделенную область с помощью Rectangular Marquee Tool (M) высотой в 3px с отступом от верхней границы в 1 px, как показано на рисунке и с помощью Gradient Tool (g) заливаем от белого - к прозрачному, сверху-вниз.
С помощью карандаша рисуем по всей ширине и высотой 1 пиксел, цвета #95B8B8, линию прямо над нижней граничащей линией. А затем над той линией которую мы уже нарисовали рисуем еще одну такую же, только другого цвета #B6B6B6.

Можно изменять цвет на ваше усмотрение, зайдя в опцию Image/Adjust/Hue/Saturation или просто нажать Ctrl+U . Enjoy it.

Скажем так, у Вас готов фон для таблицы. Как его сделать фоном нужного размера по высоте я описывал в этом выпуске. Открою еще один секрет. Данный рисунок будет тяжеловат и чтобы не нести лишние объемы для сайта, выделите область размером по ширине в 1 пиксель, сохраните выделение и вставляйте как фон.
Урок взят с сайта http://www.stormarts.ru/
Содержание
Создаем меню
Продолжим урок "Градиентная поверхность" и посмотрим, как автор предложил сделать меню для сайта. Мне в принципе этот урок бы вполне пригодился бы, как начинающему юзеру.

Создаем изображение, например 448x60 в нем рисуем все по этому уроку
Выбираем Type Tool (T) и придумываем наше меню, пусть это будет 2 пункта. Профиль и Контакты напишем черным цветом (черный - это чтобы легче читалось). В параметрах написания текста ставим Crisp (плавный текст)
Теперь добавим белую "тень", чтобы текст стал как бы "вдавленным". Сделать это можно по разному, но я предлагаю самый простой способ, который автоматизирован в последних версиях фотошопа. На окне Layers, выбираем слой с тектом (выбран по умолчанию) и нажимаем (пару раз) с правой стороны. Выпадает меню, в котором нам нужен только Drop Shadow. Задаем значения, согласно картинке.

На данный момент результат должен быть примерно такой.
Чтобы это все-таки напоминало меню нам нужно пункты разграничить со всех сторон, кроме правой, там граница не нужна, так как картинка обрезана.
Выделяем область, как показано на рисунке и с помощью кисти белого цвета закрашиваем то, что выделили. И повторим то же самое, Но сдвинув выделение на 2 пиксела вправо. (можно за раз выделить две области при нажатой клавише SHIFT, а потом их обе сразу же закрасить)
Выделяем область, как показано на рисунке. Теперь включаем градиент и заливаем выделение от ЧЕРНОГО к БЕЛОМУ ( сверху - вниз ).

Теперь можно и скопировать результат (Ctrl+C > Ctrl+V) и размножить эти полоски, между всеми пунктами.

При наведении на пункт меню можно, например, менять цвет.

Урок взят с сайта http://www.stormarts.ru/
Содержание
Обзорка

Что такое обзорка? Ну скажем это небольшой мой рекламный блок. То чего сделано у нас или что хотелось показать, ну и наконец просто ссылки на полезные ресурсы.
Сделано у нас:
Biz-Info.org - Сахалинский информационный бизнес портал. Пришлось поменять полностью дизайн.
Что предлагает проект - это размещение Вашей бизнес информации на портале бесплатно. Т.е. это практически готовые сайты с именами Biz-Info.org/yourname/. Примеры работ можно посмотреть здесь - biz-info.org/artflok/, biz-info.org/SNK/ и biz-info.org/QE/
Для дизайнеров: что можно посмотреть, ну во первых на сайте реализована доска объявлений работающая без базы MySQL и Форум - также не нуждающийся в базе данных. Возможно это пригодиться для ВэбМастеров которые не совсем умеют устанавливать скрипты с базой данных или для тех, чей хостинг может работать с PHP, но не поддерживает базы данных.
Там же я переделал каталог ссылок в каталог организаций при этом добавил отдельный модуль.
Так же сделал еще один новый модуль - каталог прайс листов, на основе каталога сайтов. Если Вам нужны такие скрипты, пишите в гостевой, без проблем положу на сайте.
Кроме того попробовал поставить скрипт CaBB v 1.1М. Скрипт примечателен тем, что занимает мало места на сервере, также не требует базы данных. Поэтому скрипт можно использовать для простых сайтов которые нуждаются в постоянном новостном наполнении.
Дизайн не трогал - времени нет, но можете посмотреть в работе http://biz-info.org/news/


Mobile.ida-dbs.com - для мобильного телефона: музыка, игры, картинки, приколы, программы. Для дизайнеров - шаблоны для WAP сайтов, руководство по созданию WAP сайта.
Содержание
Вращающийся футбольный мяч

В этом году грандиозное событие. Идет Чемпионат Мира по футболу. Вероятно многие подписчики болеют за свою любимую команду. Давайте стороной и мы не обойдем это событие. Я предлагаю поучиться в ImageReady сделать вращающийся футбольный мяч.

 

Шаг 1: В Photoshop создайте новое изображение размером 300x200 px и на новом слое нарисуйте текстуру мяча с помощью инструмента Polygon Tool (U). Вы также можете использовать мою текстуру, которая находится справа.
Шаг 2: Создайте новый слой поверх всех и примените к нему эффект: Blending Options:
Fill Opacity: 0%
Inner Shadow:
Blend Mode: Multyply
Opacity: 50%
Angle: -90
Distance: 26
Size: 46
Bevel and Emboss:
Style: Inner Bevel
Depth: 60%
Direction: up
Size: 125
Angle: 90
Altitude: 65
Highlight Mode: Normal
Цвет: Белый
Opacity: 80%
Shadow: Opacity: 0%
Шаг 3: Продублируйте слой с вашей текстурой и сместите её вправо на 10 пикселей (зажмите Ctrl и нажимайте клавишу курсора 10 раз). Зажмите Ctrl и щёлкните левой клавишей мыши по слою с шаром в окне слоёв. Проверьте, что активный - слой со смещённой текстурой. Примените эффект Spherize (Filter>Distort>Spherize…) с параметром Amount 100%. Инвертируйте выделенное с помощью сочетания клавиш Ctrl+Shift+i. Удалите выделенное клавишей Del. Cснимите выделение (Ctrl+D).
Шаг 4: Повторите третий шаг, но теперь сместите текстуру не на 10, а на 20 пикселей. Проделывайте это до тех пор, пока ваши слои с мячом не начнут повторяться. На этом этапе я также добавил тень с помощью инструмента Elliptical Marquee Tool (M) и различных слоёв Blur.
Шаг 5: Нажмите кнопку Jump to ImageReady(Ctrl+Shift+M) на панели инструментов. Теперь оставьте видимыми слои с шаром, тенью, бэкграундом и самый верхний с текстурой. В окне Animation создайте новый слой и поменяйте видимость слоёв. Самый верхний слой с текстурой теперь не видимый. Вместо него слой находящийся прямо под ним. Повторите эти действия пока все слои с текстурами не будут задействованы. Задержку установите равной 0 секундам.
Источник http://photoshopschool.ru/
Содержание
контакты
Дизайн студия "IDA-Design" www.ida-dbs.com
ICQ 293-056-466 - вопросы, консультации, помощь.
Гостевая книга для читателей - http://ida-dbs.com/book/
Содержание
 
В избранное