четверг, 28 ноября 2013 г.

Color scheme

В ходе исследования влияния цветов выявлены следующие устойчивые ассоциации:
1. Желтый - устойчивая ассоциация с юностью и оптимизмом; используется для привлечения внимания посетителей; 
2. Красный - «энергичный цвет», служит для создания эффекта срочности, чаще всего используется на распродажах; 
3. Синий/голубой - создает впечатление надежности, используется финансовыми учреждениями, страховыми агентствами, банками и т. д.; 
4. Зеленый цвет - применяется для создания эффекта покоя и расслабленности; 
5. Оранжевый - «агрессивный цвет», отлично подходящий для создания элементов призыва к действию; 
6. Розовый - романтический и женственный цвет, используется в маркетинговых кампаниях по продвижению товаров, предназначенных для представительниц прекрасного пола;
7. Черный - цвет предметов роскоши (дизайнерская одежда, автомобили высшей ценовой категории и т. д); 
8. Пурпурный цвет, считающийся «успокаивающим, спокойным цветом», используется в рекламе косметических товаров.

Цвета в CSS +HTML: http://habrahabr.ru/post/189766/ ; http://www.w3schools.com/html/html_colors.asp .

вторник, 19 ноября 2013 г.

Typography

http://www.youtube.com/watch?v=kPEwBoDSsuo&sns=fb

http://www.lynda.com

http://habrahabr.ru/post/42151/ - информация о размерах шрифтов (измерение в различных единицах: em, px, pt, percent).

http://www.fontsquirrel.com  - переработка шрифтов для мультибраузерности.

суббота, 16 ноября 2013 г.

Design with Inkscape


Используем для дизайна сайта документ с размерами 960 х 2000 рх (для изменения размеров: File » Document Properties или Ctrl + Shift + D.

понедельник, 11 ноября 2013 г.

Cтили веб-дизайна, понятие Веб 2.0

http://www.mirash.ru/imstat/web037.html - градация стилей по явлениям.
Понятие Веб 2.0 отразилось в дизайне. Предпочтительными стали округлость, имитация выпуклых поверхностей, имитация отражений на манер глянцевого пластика современных hi-end устройств (к примеру, плееры). В целом, восприятие внешнего вида на глаз кажется более приятным.

среда, 26 июня 2013 г.

Дизайн теплого, веселого интерфейса сайта в Adobe Photoshop

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

Проходя его, мы будем работать с простыми формами (прямоугольниками, линиями,стрелками и т. п.), стилями слоя (наиболее актуальными из них), масками слоя, шаблонами, стилями символов и абзацев и многими другими дизайнерскими техниками и техниками Photoshop, которые Вы можете применить к Вашему интерфейсу веб-сайта в рабочем процессе дизайна.
Шаг 1.
 Чтобы все было выровненным мы используем  960s Grid System (скачать ее можно здесь).Скачав, откройте файл “960_grid_24_col.psd”. Высота текущего документа меньше, чем окончательный дизайн. Поэтому мы в Adobe Photoshop переходим в Изображение>Размер холста>Высота 1820px, якорь (расположение): сверху в центре (Image > Canvas Size > Height: 1820px, Anchor: Top center).

Мы также должны убедиться, что наши Линейки (Rulers) и Направляющие (Guides) видимы. Итак, мы перейдем в View > Extras / Rulers / Snap (так, чтобы наши объекты "прилипали" к нашим направляющим).


Заполним наш слой цветом. Выбираем слой "Фон", просто нажимая на нем, и выбираем: Слой от фона и даем ему значимое название, например "фн".
Теперь, используя инструмент "Прямоугольное выделение" (M), создайте выделение на всю канву, поставьте цветом фона #f8eedf, потом нажмите Shift+Backspace, чтобы заполнить им выделение.
Шаг 2.
Начнем создавать наш хедер. Используя инструмент "Прямоугольное выделение" (M), или "Прямоугольник" (U) (или любой инструмент, который Вы предпочитаете использовать), создайте прямоугольник / выделение с размерами 1020x100px и заполните его любым цветом на данный момент.
Дальше добавим градиент к хедеру, нажав на слое>Опции смешивания (Blending Options)>Наложение градиента (Gradient Overlay)>используйте изображение ниже для справки:

Теперь для того, чтобы фон хедера не выглядел плоским, добавим простую Текстуру шума. Итак, создайте новый слой (он должен быть над слоем фона), создайте выделение над фоном хедера и заполните его (нажатием Shift+Backspace) цветом #ffc05e.
Перейдите в меню Фильтер (Filter) > Шум (Noise) > Добавить шум (Add Noise) > Значение (Amount) 48px, Распространение (Distribution) Gaussian. Измените Режим смешивания этого слоя (Blend Mode): Яркость (Luminosity), и снизьте непрозрачность к 5%.
Шаг 3.
Чтобы написать название сайта используйте инструмент "Горизонтальный текст" (T), напишите название сайта в соответствии со следующими характеристиками:
- Семья шрифтов: Archer (скачайте с typography.com)
- Размер: 30pt
- Плотность: жирный
- Настройки сглаживания: хрупкий (Crisp)
- Цвет: #ffffff
- Кёрнинг (при наборе текста - избирательное изменение интервала между буквами в зависимости от их формы): Оптический
- Расстояние между буквами: 50.
Добавим падающую тень (Drop Shadow) к нашему тексту, используя показанные ниже настройки:
Чтобы удостовериться, что название сайта расположено вертикально по отношению к области хедера, выберите оба слоя, а потом нажмите кнопку "Выровнять вертикально по центру", которая находится на панели управления. 
Шаг 4. 
В этом шаге мы разместим иконки социальных сетей. Начнем с загрузки этих действительно потрясающих иконок социальных сетей от KomodoMedia, Разместим четыре иконки, как на изображении ниже:

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

Давайте теперь создадим разделитель рядом с нашими иконками. Используя инструмент "Линия" (Line Tool (U)), создайте две линии, каждая из которых должна быть 1x60px, заполните одну слева с этим значением цвета: # ffd593, а ту, что справа, с этим значением цвета: # c08c3a.
Кроме того, убедитесь, что Вы оставили 20px горизонтального пространства между двумя линиями и четырьмя иконками.

Выберите инструмент "Градиент" (Gradient Tool (G)), откройте диалоговое окно редактора градиента, укажите настройки градиента в соответствии с изображением в поле ниже.
Затем щелкните правой кнопкой мыши на слое одной из линий, которую мы только что создали, выберите: Добавить маску слоя.
Перетащите  инструмент "Градиент" (Gradient Tool (G)) сверху вниз. Сделайте то же самое со слоем другой линии (или, вы можете просто скопировать маску слоя и вставить ее в другой слой).


Шаг 5.
Пришло время поработать над панелью навигации. Выберите инструмент "Прямоугольное выделение" (the Rectangular Marquee Tool (M)), создайте выделение с размерами 1020x600px, заполните его цветом #40312a.
Используя инструмент "Область (горизонтальная строка) / Однострочная область"(Single Row Marquee Tool), создайте область 1020x1px, и залейте цветом: #f9ba59.
Мы добавим подсвечивание, создав выделение с размерами 1020x1px, заполнив его цветом  #735a4f и снизив его непрозрачность к 70%.

Шаг 6.
В этом шаге мы создадим наш навигационный текст. Итак, используя инструмент "Горизонтальный текст" (the Horizontal Type Tool (T)), напишем слово "Главная", используя следующие настройки:
- Семья шрифтов: Gotham Rounded (скачайте с typography.com)
- Размер: 16pt
- Плотность: средний
- Настройки сглаживания: хрупкий (Crisp)
- Цвет: #2c8897
- Кёрнинг (при наборе текста - избирательное изменение интервала между буквами в зависимости от их формы): Метрика
- Расстояние между буквами: 50.

Потом примените падающую тень в соответствии со следующим изображением:

На следующем текстовом слое, напечатайте  остальной навигационный текст, используя такие же характеристики настройки, которые мы использовали выше, за исключением, что в этот раз мы зададим цвет #ffffff.
Опять примените падающую тень в соответствии со следующим изображением:
Шаг 7.
Теперь создадим нашу панель поиска. Начнем, напечатав слово "ПОИСК", используя такие же характеристики настройки, которые мы применяли  к навигационному тексту, но в этот раз мы изменим плотность шрифта на Книга (Book). Мы также добавим ту же падающую тень, которую добавили к слову "Главная".
Время создать поле для ввода запроса. Используя инструмент "Прямоугольник с закругленными краями" (the Rounded Rectangle Tool (U)), создадим прямоугольник размером 190x25px и с радиусом 3px, заполним его цветом #2c8797, и добавим стиль слоя к нему, соответственно со следующим изображением:
Попробуйте найти или создать очень простой значок увеличительного стекла, поместите его как наизображении ниже, и не забудьте применить ту же падающую тень, что мы применили к слову "ПОИСК" в этой иконке.

 
 Шаг 8.
Начнем работать над характеризующей / приветствующей областью. Используя инструмент "Прямоугольная область" (the Rectangular Marquee Tool (M)), создадим выделение размером 1020x400px, заполним цветом: #deccaaa.
Мы создадим простой и тонкий паттерн, чтобы сделать наш фон более интересным на вид. Идем дальше и создаем новый документ 25x25px, и заполним его фон с этим значением цвета: # deccaaa.

Используя  инструмент "Эллипс"(the Ellipse Tool (U)) создадим круг  около 4x4px, заполним его: #aa9364, удостоверимся, что он выровненный в центре документа.
Создадим другую копию этого круга, подвинем его вниз на 2 рх и изменим его заливку на цвет   #f2e5cb.
Перейдите в Редактировать (Edit) > Определить паттерн (Define Pattern)> Назвать его (Give it a name)
Примените следующий стиль слоя к фоновому слою (тому, который создали в начале этого шага):

Шаг 9.
Перетащите несколько Горизонтальных направляющих (Horizontal Guides) в соответствии со следующим руководством:
Используя инструмент  "Прямоугольник с закругленными краями" (the Rounded Rectangle Tool (U)), создадим прямоугольник с размерами 950x260px, с радиусом 5px и заполним цветом #40312a.
Добавим внутреннюю тень к нему. Используйте изображение ниже для подсказки:
Добавьте эффект шума к прямоугольнику (что мы сделали для фона нашего хедера), добавьте маску слоя к этому слою, перетяните с првого верхнего угла к нижнему левому линейный градиент от  черного к белому.

Первоисточник: http://webdesign.tutsplus.com/tutorials/design-a-warm-cheerful-website-interface-in-adobe-photoshop/

Создание крутого веб-сайта с фантастическим эффектом прокрутки

http://line25.com/tutorials/create-a-cool-website-with-fancy-scrolling-effects - разработка дизайна сайта для объединения различных страниц в один комплекс с использованием CSS.

среда, 5 июня 2013 г.

Создание непростого сноубордистского тематического веб-дизайна

      Шаг за шагом создадим шаблон дизайна сайта, который навеянный темой сноубординга и с использованием шероховатой текстуры и с добавлением к проблемным участкам элементов с помощью инструмента "Кисть".
      Начнем с создания основной (колоночной) сетки для размещения на ней элементов нашего дизайна, потом, используя смесь фотографий и манипуляций в программе Фотошоп, создадим концепцию веб-дизайна для вымышленного бренда под названием "Снежная конфета".

среда, 24 апреля 2013 г.

Определение, соотношение и перевод времени в странах с разными часовыми поясами

Этот вопрос важен для бизнеса, личной жизни и развития восприятия мира и его устройства. Предлагаемый сайт поможет определить и соотнести время в разных полушариях и просто в разных странах))
http://www.timeanddate.com/worldclock/converted.html

пятница, 19 апреля 2013 г.

Рисование с помощью Adobe Photoshop

Очень интересно создавать живые существа на бумаге кистью с красками, а вот я воплотила это же с помощью Adobe Photoshop CS3. В создании проявляется что-то давно заложенное в генетической памяти со времен Адама и Евы. По крайней мере, мне сегодня так показалась, когда я создавала этого Чудо-Медвеженка (Хага).
Мне будет ценно Ваше мнение по поводу него!

Учитывая Ваши комментарии добавляется к Хагу компания, чтобы ему было не скучно!)
Но еще надо добавить бантики!!!)))
И вот, эти два любящих сердца встретились!!!!)) И жили они долго и счастливо - вместе с нами!!))
А это Хаг уже с опытом, старший, много книг прочитал:




пятница, 5 апреля 2013 г.

Лучшие цветовые инструменты для веб дизайнеров

Определить основной цвет для веб проекта можно легко, но найти альтернативные, чтобы выделить его, бывает сложно. В таких случаях цветовые инструменты играют свою роль. Цветовые инструменты помогут вам определить выделяющий цвет или даже предложат наборы цветовых выделяющих палитр, когда вы полностью растерянны.


воскресенье, 24 марта 2013 г.

пятница, 22 февраля 2013 г.

Техническое задание — исходный документ на проектирование технического объекта. ТЗ устанавливает основное назначение разрабатываемого объекта, его технические характеристики, показатели качества и технико-экономические требования, предписание по выполнению необходимых стадий создания документации (конструкторской, технологической, программной и т. д.) и её состав, а также специальные требования.

Техническое задание

Техническое задание — исходный документ на проектирование технического объекта. ТЗ устанавливает основное назначение разрабатываемого объекта, его технические характеристики, показатели качества и технико-экономические требования, предписание по выполнению необходимых стадий создания документации (конструкторской, технологической, программной и т. д.) и её состав, а также специальные требования.

вторник, 19 февраля 2013 г.

Правила заботы о клиентах интернет-магазина

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

Ошибки электронной коммерции

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

Быть вегетарианцем полезно? - Психология отношений

понедельник, 18 февраля 2013 г.

Уроки рисования (Часть ІІ)

Вот и пролетело время...Рисовать становиться проще, но от этого еще интереснее и приятнее!! Пробуйте - и у Вас все получится!!
Это было весной-летом 2012 года:

Ошибки проектирования (например, интернет-магазина)

1. Убогий или устаревший дизайн
Для Вашего веб-сайта важно показать современный приятный стиль.  Профессиональная проектировка для Вашего сайта имеет решающее значение и задачу перепроектировки лучше оставить специалистам.

Работа с Гугл-календарем

https://www.google.com/calendar - общая настройка календаря для Вас.
http://support.google.com/calendar/bin/answer.py?hl=ru&ctx=welcome&answer=37244 - напоминания для отдельного мероприятияи повторяющиеся мероприятия (особенности использования Гугл-календаря).
Приятной работы с сервисом и успехов!!

Планирование работы с Гугл-задачами

Работа с инструментом SEO-оптимизиции AdWords

Фильмы о рекламе и PR

http://kino-teatr.ua/ru/main/articles_article/article_id/3773.phtml
(источник - http://kino-teatr.ua)
Список можно самостоятельно пополнять и добавлять к этому в комментариях) "99 франков" - оригинальный, но не для примера в жизни) Спасибо!

суббота, 9 февраля 2013 г.

Resume (Elena Pogoda)


In 2005 I entered the first course of Chernigiv State Pedagogical University named after T. G. Shevchenko, the department of history.
In 2010 I graduated from Chernigiv National Pedagogical University named after T. G. Shevchenko.
A sphere of my scientific interests is the history of education of the twentieth century.
In our time it is necessary to update the system of university education, because Ukraine wants to be a European country. That’s why the experience of previous generations is actual for us. I have some articles on the topic of my dissertation.
I hope, that the results of my future researchers will help us to reorganize the university education for the preparation of the intellectual elite of Ukraine.

История птичьей верности. Впечатлительным мимо.. - Психология отношений