Effects - spellsin.blogspot.com

Создаем сайт с помощью Microsoft Expression Web 3

noreply@blogger.com (b.phantom) — Sun, 20 Dec 2009 17:24:00 +0000

Создаем проект

Запустите Expression Web и в меню Site найдите пункт New Site (Новый сайт).

В появившемся окне на закладке General (Общие) выберите Empty Site (Пустой сайт) и ниже в строке Location — местоположение того сайта, где будет храниться папка с экспортированными картинками.

В данном случае это Documents\My Web Sites\MyShot\.

Создаем страницу
В меню File (Файл) • New (Новый) • Page (Страница) на закладке CSS Layouts (CSS-разметка) выберите подходящий для себя тип разметки страницы. В данном случае будет указано: Header, nav, two columns, footer (Верхний колонтитул, навигация, две колонки, нижний колонтитул). Правая колонка должна быть меньше по размеру, чем левая.

После этого автоматически создадутся два файла, определяющие верстку в две колонки с местами для заголовка, меню и копирайта. Сохраните их как index.html и styles.css соответственно. После этого они появятся в папке проекта сайта, на панели Folder List (Список папок).

Пора наконец осмотреться в Expression Web. В центре экрана расположена рабочая область открытых документов с режимами отображения Design (Дизайн), Split (Совмещенный), Code (Код). Слева и справа находятся необходимые для работы панели Folder List, Apply Styles/Manage Styles (Применение стилей/Управление стилями), Toolbox (Инструментальная панель) с элементами управления, CSS Properties (Свойства CSS).

Меняем CSS-стили

Теперь необходимо привести в соответствие оформление блоков и страницы, применив редактор CSS. На панели Manage Styles отображается список стилей, доступных для организуемой страницы: body, #masthead, #top_nav, #container, #right_col, #page_content и #footer. Для каждого из них нужно сделать необходимые правки, щелкнув на названии стиля правой кнопкой мыши и выбрав через появившееся контекстное меню пункт Modify Style (Видоизменить стиль).

Для селектора body на закладке Background (Фон) выберите такой же цвет фона (background-color), какой был использован при создании дизайна, — #1C1C1C. На закладке Font (Шрифт) измените цвет текста (color) на белый — #FFFFFF. На закладке Box (Блок) поставьте внутренние отступы — padding 20 px.
Для стиля #masthead в качестве фонового изображения (background-image) выберите файл коллажа collage.png из папки с рисунками, сделайте его неповторяющимся (указав в нужном раскрывающемся списке значение no-repeat) и осуществите позиционирование: по координате Х — по центру, по Y — сверху. На закладке Position установите значение Height (Высота) равным высоте коллажа — 275 px и ниже и значение Width (Ширина) такое же, как ширина рисунка, — 870 px.
Для стиля #right_col ширина блока равна 285 px.
Для стиля #page_content отступ справа (margin-right) составляет 285 px.
Для стиля #container ширина равна 870 px.
Кроме того, необходимо добавить новые стили для двух заголовков и картинок.

На той же панели Manage Styles (Управление стилями) выделите New Style (Новый стиль) и выберите селектор h1 (Заголовок первого уровня). В качестве фона для стиля установите изображение, предназначенное для большого заголовка — head_big.png, и задайте для него такие значения: background-repeat: no-repeat; background-position: left center. Далее укажите Color (Цвет текста) — #FFFFFF, Font-size (Размер шрифта) — 14 px, Line-height (Высота строки) — 30 px, Margin (Поля) — 0, Padding-left (Отступ слева)— 15 px, Height — 30 px. Первый стиль готов. Не забывайте, что на странице размещаются заголовки блоков фиксированной ширины, а значит, для «резинового» дизайна следует применять другие методы.
Второй заголовок сделайте на основе первого. На панели Manage Styles для h1 в контекстном меню выберите New Style Copy. В окне измените селектор на h2 (Заголовок второго уровня) и в качестве изображения фона заголовка установите head_small.png.
Создайте еще один стиль для селектора img (изображение) и поставьте для него Margin (Поля): 10 px.
Наполняем страницу

Теперь осталось наполнить данными наш мини-сайт из одной страницы.

1.Сначала добавьте логотип. Откройте папку images в панели Folder List и мышью перетащите файл logo.png в область слоя div#masthead. После этого в шапке, фоном для которой служит коллаж, появится изображение логотипа.

2.В рабочей области html-документа, опять же в режиме отображения Design, выберите мышью блок page_content. Напишите заголовок «Видео» и на панели инструментов в области форматирования текста. В результате первый стиль автоматически изменится.

3.Ниже под заголовком нужно будет поместить Silverlight-видеоплеер. В меню выберите Insert • Media • Silverlight video, найдите нужный клип, в появившемся окне с настройками кодирования укажите понравившийся плеер и задайте необходимые размеры, например 500×280 пикселов.

4.Нажмите на кнопке Encode (Кодировать) и ждите. Когда процесс кодирования закончится, то на странице появится полнофункциональный инструмент просмотра выбранного видео. Также в папку проекта автоматически добавятся сопутствующие файлы.

5.Ниже объекта Silverlight (в режиме Design он залит белым цветом) вставьте следующий заголовок уровня h1 с названием «Фото» и в меню Insert (Вставка) • Picture (Картинка) • From File(из файла) добавьте небольшие изображения. При очередном сохранении страницы программа предложит разместить копию выбранных объектов в пределах проекта. Можно указать в качестве места назначения уже существующую папку images или создать отдельную, например под названием photo.

6.Выберите мышью в рабочей области проекта правую колонку right_col и добавьте в нее заголовок уровня h2 с названием Twitter.

7.Теперь осталось лишь вставить сообщения из Twitter в правую колонку. Для этого воспользуемся готовым мини-приложением Silvester — Silverlight Twitter Widget. Чтобы более подробно познакомиться с его описанием и кодом, стоит зайти на сайт www.silverlightshow.net/items/Silvester-A-Silverlight-Twitter-Widget.aspx. А сейчас нужно перейти в режим отображения html-страницы Code (в него следует переключиться в нижней части рабочей области) и вставить код этого приложения в нашу правую колонку — right_col.

8.Сохраните страницу и запустите для просмотра в браузере. Для этого нажмите клавишу либо на панели инструментов кнопку Preview in Windows Internet Explorer.

После окончания верстки и размещения результата на сервере хостинговой компании получилась вполне работоспособная и симпатичная веб-страница.

* * *

В обеих частях статьи было рассмотрено, как можно разработать дизайн элементов сайта в Expression Design и сделать в Expression Web мини-сайт размером в одну страницу. С остальными продуктами Expression и их возможностями можно познакомиться на русскоязычном ресурсе www.microsoft.com/rus/expression/. Для тех, кто хочет пойти дальше и научиться создавать насыщенные интернет-приложения с помощью технологии Silverlight, имеет смысл познакомиться с книгой на русском языке «Введение в Microsoft Silverlight 3», которую легко загрузить в разделе технических ресурсов
www.microsoft.com/rus/expression/resources/

Мини-сервер или NAS своими руками или выбрать готовый?

noreply@blogger.com (b.phantom) — Sun, 20 Dec 2009 13:19:00 +0000

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

Вместе с этим часто надо выделить фотогалерею или медиатеку на отдельном устройстве.

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

Проще, удобнее и практичнее использовать выделенное хранилище данных, но не просто сетевой диск, NAS, а сервер, который помимо работы с сетевыми папками, сможет обеспечить доступ по FTP для загрузки файлов через интернет, сможет выступить в роли веб-сервера для несложного сайта, медиа-библиотеки.

Мат.плата
Gigabyte GA-GC330UD (Intel 945GC+ICH7+Atom 330 1.6 GHz Dual-core) mini-ITX RTL.

В 1986 г. несколько молодых людей основали компанию GIGABYTE Technology.
За прошедшие 18 лет Gigabyte стала признанным лидером индустрии системных плат и ключевым игроком в мире высоких технологий, завоевав прочную репутацию благодаря высочайшему качеству своей продукции. Gigabyte сертифицирована на соответствие стандартам ISO-9001:2000 и TL9000, а также ISO 9241-31-14001 и OHSAS-18001.

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

В 2003 году Gigabyte в седьмой раз подряд была удостоена ежегодной национальной награды Тайваня за качество "Taiwan Symbol of Excellence", получив призы за все представленные на конкурс модели продукции. Gigabyte стала единственным производителем системных плат, достигшим столь высоких результатов.
Сайт производителя: http://www.gigabyte.ru
Цена: 2850.00

Gigabyte MIB T5140 GZ-SPIM51-P0B корпус Mini-ITX
Выбрал такой

Описание регулируемая высота и угол наклона монитора; габариты: 250 x 65 x 445 (7л); цвет: черный; материал: пластик + сталь; отсеки внешние: 1x 5.25" + 1x 3.5", внутр: 1x 3.5"; порты: 2x USB, Audio; блок питания: дискретный 65W поддерживаемый размер мониторов: 19"-23" (wide) до 5кг; крепление VESA: 100x100 или 75x75 мм; вес: 4.2 (5.2)кг.
Цвет Черный
Форм-фактор mini-ITX
Отсек(и) 5.25 1
Отсек(и) 3.5 1
Отсек(и) 2.5 Нету
Другие отсек(и) CD/DVD - Есть, FDD - Ecть
Слот(ы) расширения Нету
USB-порт(ы) Есть (2x Front Panel)
Audio-порт(ы) Есть
FireWare-порт(ы) Нету
Блок питания (PSU) 65W
Размеры 65 x 250 x 445
Материал Корпус - сталь
Лицевая панель - пластик

Сайт производителя: www.giga-byte.com
Цена: 2061.50

Модуль памяти: Team 2Gb
Описание:
Объём: 2048MB.
Производитель: TEAM
Емкость: 2GB
Латентность: CL6
Напряжение питания (V) : 1.8V
Цена: 1460.10

Slim-привод: NEC AD-7703S-01
Описание:
Форм-фактор: Slim
Интерфейс: Slim SATA
Буфер: 2 Мб
Скорость чтения
DVD: 8x max. CD: 24x max.
Скорость записи
DVD-R: 8x max. DVD+R: 8x max.
DVD-RW: 6x max. DVD+RW: 8x max.
DVD-R DL: 6x max. DVD+R9: 6x max.
DVD-RAM: 5x max.
CD-R: 24x max. CD-RW: 24x max.
Access time
DVD: 180 ms CD: 150 ms
Interface
S-ATA
Burst transfer rate
150 MByte/s
Cache
2 MByte
Media supported
DVD-ROM, DVD-R, DVD-R DL, DVD-RW DVD-RAM DVD+R, DVD+RW, DVD+R9 CD-ROM CD-R CD-RW
Modes supported
DVD-Video CD-ROM XA, CD-Audio, CD Extra, CD Text CD-I Ready, CD-Bridge, PhotoCD, Video CD, Hybrid CD
Compatibility
MultiRead, PC2001, Microsoft® Vista
Weight
0.170 kg
Dimensions
128 mm x 12.7 mm x 129 mm
Special features
Dust protected enclosure Buffer under run error prevention, 12 cm and 8 cm CD and DVD media are supported
Цена: 2154

Жесткий диск Seagate 1Tb SV35.2 ST31000525SV SATA 7200rpm 32Mb
Описание:
Емкость диска (Гб) : 1024
Размер кэша (Мб) : 32
Интерфейс: SATA
Скорость вращения: 7200об/мин
Интерфейс : SATA
Емкость диска (Гб) : 1024
Размер кэша (Мб) : 32
Скорость вращения шпинделя (об/мин) : 7200
Форм-фактор : 3.5"
Сайт производителя: www.seagate.com
Цена: 3955.60

ЖК-монитор Acer V173Bb black 5ms 7000:1
Описание:
Диагональ: 17"
Разрешение: 1280 x 1024
Время отклика: 5мс
Тип матрицы : TN
Шаг точки (мм) : 0,264
Яркость (кд/м2) : 300
Контрастность : 7000:1
Глубина цвета : 16.2 млн. цветов
Угол обзора по горизонтали : 160
Угол обзора по вертикали : 160
Время отклика (мс) : 5
Развертка по вертикали (Гц) : 55 - 75
Развертка по горизонтали (кГц) : 30 - 80
Энергопотребление : ~28 Вт
Аналоговый интерфейс (D-Sub) : Есть
Габариты : 370.2 x 376 x 160.2
Сайт производителя : www.acer.ru
Цена: 4721.30

Посчитаем расходы на наш мини-сервер
Мат.плата (Gigabyte GA-GC330UD Intel 945GC+ICH7+Atom 330 1.6 GHz Dual-core) mini-ITX RTL) - 2850.00 р.
Gigabyte MIB T5140 GZ-SPIM51-P0B корпус Mini-ITX - 2061.50 р.
Модуль памяти (Team 2Gb) - 1460.10 р.
Slim-привод (NEC AD-7703S-01) - 2154 р.
Жесткий диск (Seagate 1Tb SV35.2 ST31000525SV SATA 7200rpm 32Mb) - 3955.60 р.
ЖК-монитор (Acer V173Bb black 5ms 7000:1) - 4721.30 р.
Итого: 17202.5 р

Готовый к работе, доступный мини-сервер - идеальное решение для тех, кто не хочет вникать в вопросы "как это работает", но кому нужно положиться на систему, работающую в режиме 24x7, незаметно для окружающих, но далеко не на последнем месте в вашей сети.

Parchment

noreply@blogger.com (b.phantom) — Thu, 10 Dec 2009 23:01:00 +0000

Parchment
Количество: 1 шт.
Формат - PSD

Parchment

WordPress Avatar`s (The Legal B.P)

noreply@blogger.com (b.phantom) — Wed, 09 Dec 2009 14:37:00 +0000

WordPress Avatar`s (The Legal B.P)
Количество: 10 шт.
Формат - PNG

WordPress Avatar`s (The Legal B.P)

Шаблоны веб-сайтов

noreply@blogger.com (b.phantom) — Tue, 24 Nov 2009 19:35:00 +0000

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

Шаблоны веб-сайтов

Training Skin phpBB

Daviny WordPress

Шаблон Blizzard

New Brush

noreply@blogger.com (b.phantom) — Tue, 24 Nov 2009 13:13:00 +0000

Нам нужно начать с создания листка.

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

Используйте Pen Tool, чтобы нарисовать контур листка. Вам не нужно повторять каждую деталь, просто нарисуйте основную форму.

Залейте фигуру черным, зайдя в палитру Paths, кликнув правой кнопкой на контур, чтобы выбрать “Make a Selection“, затем нажмите Alt+Backspace, пока ваш цвет переднего плана – черный.
Убедитесь, что позади листка отображается прозрачность.

Вы можете спрятать фоновый слой и другие, кликнув иконку глаза в палитре слоев. Теперь мы готовы создавать кисть.

Используйте Rectangular Marquee Tool, чтобы выделить ваш листок.
Зайдите в Edit>Define Brush и назовите кисть как хотите в диалоговом окне, которое появится.

Вы можете теперь увидеть вашу кисть в Brush Palette.
Создайте новое пустое изображение, выберите Paintbrush Tool и кликните на вашей кисти внизу палитры слоев.

В палитре слоев существует много способов настроить кисти так, как вам нравится. Начните с увеличения Master Diameter кисти, пока она не будет выглядеть реалистично в превью. Я выбрал 40 пикселей.

Затем кликните на Brush Tip Size и увеличьте расстояние. Я поставил 90%.
Далее - Shape Dynamics.

Вот где начинается веселье.
Поставьте Size Jitter на 100%. Экспериментируйте с другими настройками, пока вам не покажется, что хватит.

Увеличьте Minimum Diameter до примерно 24%, чтобы избегнуть появления слишком маленьких листочков в результате.
Я также изменил Angle Jitter на 13% и Angle Jitter Control на Pen Pressure.

Кликните на Scatter в левом меню.
Поиграйте с Crank up the Scatter. Я поставил 607%.
Убедитесь, что выбрана опция Both Axes. Настройте Count, если хотите.
Я оставил 4. Count Jitter у каждой кисти сильно отличается, поэтому все зависит от вас. Я снизил до 20%.

Затем зайдите в меню Color Dynamics.
Поставьте Foreground/Background Jitter на 100%, чтобы вышло наибольшее разнообразие цветов. Также вам понадобится изменить немного Hue Jitter.

Я поставил на 14%. Hue Jitter, как и три настройки под ним, меняет цвет листьев. Вам, возможно, понадобится вернуться назад и настроить их ещё раз, чтобы добиться лучшего эффекта.

Убедитесь, что Opacity и Flow кисти поставлены на 100% меню опций наверху экрана так, чтобы листья отображались в полном цвете.

Автор: Spoono

Water Brushes for Photoshop

noreply@blogger.com (b.phantom) — Tue, 24 Nov 2009 12:25:00 +0000

Water Brushes for Photoshop
Количество: 59 шт.
Формат: abr

Water Brushes for Photoshop

Draw a Christmas tree - lights and stuff

noreply@blogger.com (b.phantom) — Tue, 24 Nov 2009 12:08:00 +0000

Создаем новый документ.
Рисуем небольшой эскиз ёлки типа скоро новый год ^_^

Откройте палитру Кистей F5, выбераем кисть Chalk 11 pixels.
Shape Dynamics->Size Jitter 0%, Control: Pressure, Minimum Diameter 1%,
Angle Jitter 4%, Control: Pen Pressure, Roundness Jitter 5%,
Control: Pen Pressure, Minimum Roundness 25%
Цвет кисти #5B5F3F

Автор не использовал причудливые узоры, только чёткие.

Используем изображение с оттенками, в качестве цветовой палитры для ёлки.

Рисуем иголки, не забудьте создать новый слой.
Начинаем с темного, потом потихоньку переходим к светлому.

Ниже слоёв с ветвями и иглами создайте новый слой и нарисуйте ствол и большие ветви, измените немного настройки кисти, начнём добавлять структуру дереву.
Кисть та же, но чуть увеличьте размер и рассеивание на обеих осях.
Не забудьте помещать каждый цвет в его собственный слой.

Используем ту же кисть, рассеянную на обеих осях, и только набросайте, выбирая цвета.
Главным образом используются три цвета.

F5 Spatter 14 pixels и размазываем.
Это было сделано, чтобы добавить несколько больше оттенков зеленого и заполнить промежутки

Дублируем слои с размазанной ёлкой и отразите по горизонтали Edit\Transform\Flip Horizontal, поменяйте режим наложения blending mode для слоя на Multiply.

Теперь надо поработать над эффектом зеркала, пройдемся кистью по ветвям.

Продолжаем добавлять оттенки зелёного, кисть Chalk, помогает создавать рассеянные мазки

C ёлкой закончили, теперь будем ее украшать, рисуем мишуру.

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

Создаем ещё один слой над слоем Мишура, и слейте со слоем Мишура.

Меню Filter\Distort\Wave, параметры по умолчанию.
Далее примените стиль слоя Оuter glow, параметры по умолчанию, только задайте цвет свечения от светло-жёлтого к белому.

Добавим огоньков мягкая круглая кисть.
Создаем три слоя для огоньков и для каждого примените стиль слоя Оuter glow, настройки разные.

Для слоя с белыми огоньками установим режим наложения Blending mode Vivid light, для слоя с синими Hard light и для красных Color burn.

Для создания фона применztv градиент Gaussian, monochromatic.
Также вокруг ёлки создайте ореол свечения инструментом Dodge tool, большая круглая мягкая кисть.

Автор: Mihai