В этом уроке я расскажу как можно создать jQuery вкладки и интегрировать их в sidebar wordpress.

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

Для начала определимся с нужными для работы файлами. Нам понадобятся: sidebar.php, header.php, style.css — файлы шаблона и создать tabs.js. Так же требуется скачать jQuery. Созданные и скачанные файлы кидаем в папку с темой wordpress.

Подключаем jQuery к блогу.

Открываем файл header.php и в любом месте между тегами вставляем код:

1

2

Далее можно закрыть файл(он нам больше не понадобится).

Создание sidebar.

Для начала открываем sidebar.php и вставить код. Он связан с jQery , поэтому если будете менять классы, нужно менять их и в tabs.js

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

31

32

33

34

35

36

37

38

 







Ваш текст


Ваш текст


Ваш текст


Ваш текст


Ваш текст










Сюда помещаяем ваш текст 








Во вкладках так же можно использовать дивы




 

С сайдбаром всё, можно закрывать.

Перейдем к jQuery.

Открываем (или создаем) файл tabs.js — это „сердце“ нашего скрипта. И вставляем следующий код:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

$(document).ready(function() {

$('div.tabbed div').hide();

$('div.t1').show();

$('div.tabbed ul.tabs li.t1 a').addClass('tab-current');

 

// Вкладки боковой панели

$('div.tabbed ul li a').click(function(){

var thisClass = this.className.slice(0,2);

$('div.tabbed div').hide();

$('div.' + thisClass).show();

$('div.tabbed ul.tabs li a').removeClass('tab-current');

$(this).addClass('tab-current');

});

});

Файл можно закрыть.

Украшаем боковую панель.

Поскольку я не знаю в каком виде подать вам эти вкладки, сделаю все стандартным, а вы уж сами „разукрасите“ её как хочется. Вставляем код в файл style.css(главный файл стилей шаблона):

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

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

>

 

="text-align: left;">.tabbed {

}

 

="text-align: left;">/* Список вкладок*/.tabbed ul.tabs {

float: left;

display: inline;

width: 100%;

margin: 0;

padding: 0;

}

.tabbed ul.tabs li {

list-style: none;

float: left;

margin: 0;

padding: 0;

}

.tabbed ul.tabs li a {

overflow: hidden;

display: block;

margin: 0 2px 0 0;

padding: 10px 12px;

}

.tabbed ul.tabs li a:hover {

}

 

="text-align: left;">/* Выбранные вкладки */

.tabbed ul.tabs li a.tab-current {

}

 

="text-align: left;">/*Содержание выбранной вкладки */

.tabbed div {

float: left;

display: block;

width: 100%;

}

.tabbed div.t2, .tabbed div.t3, .tabbed div.t4 {

display: none;

}

.tabbed div ul {

}

.tabbed div p {

}

.tabbed div div {

}

Вот и всё, если немного потратить время, я уверен получится замечательное  jQuery меню.

Если у кого не получилось или есть вопросы, пишите в комментарии — помогу чем смогу.

В этом уроке мы научимся создавать классные иллюстрации, без особых навыков рисования.

Видео урок на английском языке, но думаю итак все понятно. Переводы видео можно ожидать в ближайшее время. Не хочешь пропустить русских видео уроков? Подпишись на rss рассылку и будь первым!

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

1.Favicon (иконка веб-сайта)

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

Для того, чтобы добавить иконку на свой сайт:

1. Нужно нарисовать любую картинку в photoshop, сохранить ее под именем favicon.ico (не обязательно делать такое имя, но так уж принято).

Favicon from Pics

Сервис поможет быстро сделать иконку из любой картинки.

Favicon в photoshop

Урок о том, как нарисовать иконку в фотошопе и сохранить ее в .ico

2. Загрузить favicon.ico в корневую папку сайта.

3. Добавить следующий код в странице, перед тегом

1

Для вдохновения:

Favicons эпизод 8 —  Smashing Magazine опубликовал уже 8 частей с лучшими иконками из всего интернета, стоит взглянуть на них для вдохновения(ссылки на остальные 7 частей — в посте).

2. Использование градиентов, текстур, теней и однопиксельных линий

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

Урок по градиентам

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

Texture Lovers

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

Lost & Taken

Блог с большим количеством, текстур отличного качества

Примеры работ:

3. Иконки

На третьем месте расположились иконки(не по степени важности, каждый из этих элементов крайне важен). Задача дизайнера найти и правильно разместить иконки, плавно вписывающихся в концепцию. Благо в интернете огромное множество различных иконок, качественных и не очень. Так же можно нарисовать все иконки самому, и они идеально впишутся в запланированный дизайн.

Полезные ресурсы:

Как использовать иконки для поддержки содержания в веб-дизайне

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

Icon Finder

Поисковик иконок. Ищет по более 100 000 иконкам.

75 бесплатных сетов иконок, для веб-дизайнеров и разработчиков

Большая коллекция иконок премиум класса.

Черпаем вдохновение:

4. Пробелы

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

Whitespace

Статья о том, как важны пробелы в веб-дизайне.

Эффективное использование пробелов в веб-дизайне

Как эффективно использовать свободное место и несколько примеров.

Примеры:

Конец первой части, продолжение статьи будет в ближайшие дни. Хочешь прочитать его первым? Подписывайся на rss рассылку!

Jerico Santander — известный  иллюстратор из Испании. Он специализируется на 3D иллюстрациях, рисунках, ретушировании и техдизайне. Самые известные работы Jerico — «Own World» и «Open Source».  Jerico Santander расскажет нам, о его фантастических произведениях и своей дизайнерской жизни.

1. Добро пожаловать. Для начала представься пожалуйста.

Привет всем! Я Jerico Santander, иллюстратор, живу на  Канарские острова, Испании. Наряду с дизайном и иллюстрациями, я также бегаю по утрам, люблю рыбачить и кушать мамины чизкейки

2. Как ты начал свою карьеру дизайнера? Что сподвигнуло на это?

Еще с начальной школы меня больше тянуло рисовать, нежели играть с мячом, а в средней школе, общения с девчонками, у меня было меньше, чем общения с компьютерами& Как-то я всегда был связан с этим миром. До сих пор помню, когда я первый раз увидел Photoshop (спасибо брату).

Как и многие другие иллюстраторы, свою карьеру я начал с разработки макетов для сайтом. Затем однажды я нашел легендарный Infinity Digital Vision — каталог с работами мастеров таких, как Mike Young или Jens Karlsson. Я понял, что нужно попробовать себя в digital art. Пытаясь подражать им, я начал перерисовывать их работы в Photoshop.

3. Как ты определяете себя? Я вижу, ты используешь  иллюстрации, 3D объекты и много других вещей. Нельзя сказать, Jerico только "иллюстратор". Ты не относишь себя к одной области. Будешь ли ты продолжать эту моду? Кроме того, каковы планы на будущее?

Многие художники находят ресурсы везде. Я использую: фотографии, digital art и иногда немного 3D. Я практически ничего не делаю сам, просто соединяю  изображения вместе, получая что-то совершенно новое. Для меня digital art — что-то вроде коллажа.

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

4. Я думаю, что многим людям, интересно знать: как выглядит процесс проектирования работ. Как начинаешь работу над дизайном и как её заканчиваешь? Например, можешь ли ты поделиться тайнами создания  «Own world»?

Это часто зависит от проекта. Мне всегда нужно сделать несколько эскизов, найти нужные изображения на стоках, сделать 3d модели(если это необходимо). Затем я соединяю  это вместе, рисую свет, тени и т.д. Часто получается так, что по завершению работы, приходит хорошая идея и приходится переделывать большую часть работы!

5. Кто твои любимые художники?Можешь ли ты поделиться своим любимым веб-сайтом?

Из традиционные художников: Mars-1 и Josh Keyes. Digital art: Alex Trochut и Microbot. О моих любимых сайтов и источниках вдохновения: depthcore.com, behance.net, CGSociety и DeviantART.

6. Какое программное обеспечение ты используешь? Используешь ли ты планшет? Какой любимый инструмент в Photoshop и почему?

Да, я не могу работать без планшета. У меня стоит:А. А. Cintiq 21, „Я люблю тебя, детка!“. Какими программами я пользуюсь? Photoshop и немного 3DsMax. Самым полезным и универсальным инструментом в фотошопе, считаю — кисть.

8. Как читатели могут найти Jerico Santander в Интернете?

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

Сейчас меня можно найти на Behance, как Jerico Santander

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

Шаг 1

Для начала нам потребуются фотки воды, логично? Идем на любой сток и ищем нужные картинки. Ключевые слова для поиска: pure water, water side view, splashes, набираете как можно больше материала, не пригодится в этот раз, пригодится в следующий. Если имеется возможность купить фотки, лучше купите, проблем будет гораздо меньше.

Шаг 2

Дальше мы каждому слою ставим Multiply(не забывайте, что каждая фотка на отдельном слое). После этой нехитрой манипуляции начинаем выстраивать воду в одну линию так, чтобы стыки примерно подходили друг к другу. Я специально уменьшил фотки до нужного мне размера, затем сделал каждой smart sharpen с параметрми amount 100% radius 0,3.

У  меня получилось вот так:

Шаг 3

Теперь у всех картинок нужно убрать цвет. Нажимаем ctrl+u и тянем средний ползунок до самого конца. После этой операции у нас остался фон вокруг воды. Чтобы ручками все это не затирать, затем ctrl+l. Нас интересует input levels, а точнее белый ползунок справа. Двигаем его влево и смотрим, как на определенных участках пропадает ненужный серый фон. Самое главное не переборщить. Даже если останется немного фона, ничего страшного, потом затрем руками.

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

Шаг 4

Теперь нам нужно поместить воду на черный фон. То есть каждую картинку необходимо инвертировать. Но, перед тем как инвертировать, сперва мы меняем у всех фоток multiply на normal. Затем, чтобы как можно лучше инвертировать фотку, мы снома идем в Levels(ctrl+l) и двигаем вправо черный крайний левый ползунок в input levels, пока наша вода не получится черной. Опять же, самое главное не перестараться. Затем когда все фотки удачно инвертированы, создаем слой, кидаем его под фотки и заливаем черным цветом.

Вуаля:

Шаг 5

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

Результат:

Шаг 6

Пришло время пузырей. Технология точно такая же, как и у воды, такие же действия, как описано выше. Но есть маленький бонус, называется он rons water и прекрасно ишется в гугле. Если вы делаете пузыри кистями, не забывайте их шарпить через smart sharpen играя со значением radius до того момента, пока результат не будет удовлетворять потребности. После того, как вода с пузырями готова, все слои можно слить, предварительно сделав дубликат. И в завершении, нам необходимо покрасить воду, в какой-нибуть цвет. Создаем новый слой поверх воды с пуырями, заливаем его, к примеру #00AEFF, выставляем multiply и снижаем opacity до 40%.

Вот и все:

При определенных времязатратах и усилиях можно получить следующий результат:

Автор: Сергей Никишин

Видео демонстрирует новые возможности Adobe Photoshop CS5

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

Источник  Разуев Николай

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

В этой статье, собраны лучшие уроки по созданию различных иконок в Adobe Illustrator. К сожалению уроки пока на английском языке, но в планах на ближайшее время  исправить это. =)

Как создать иконку коктейлей

Этот урок рассказывает, как нарисовать бокалы с коктейлями в Adobe Illustrator.

Как создать Yellow Submarine(желтую подводную лодку)

Учимся рисовать подводную лодку, с помощью градиентов.

Как создать иконку Академии, используя простые формы

Учимся рисовать клевую иконку академии, используя простые формы иллюстратора.

Иконка карандаша

Рисуем иконку карандаша с резинкой в Illustrator.

Волшебная палочка

Урок, по созданию волшебной палочки.

Золотой векторный компас в Illustrator

Создаем золотой компас

Праздничный торт

Урок, по рисованию иконки праздничного торта.

Объемные иконки, корзины для покупок

Рисуем псевдообъемое изображение корзины для покупок.

Надувные человечки

Создаем иконку забавных человечков.

Иконка объектива для фотокамеры

Рисуем иконку объектива фотокамеры.

Иконка очков

Учимся создавать клевую иконку очков.

Игорные кубики

Рисуем кубики для казино

Иконка Safari

Рисуем иконку Mac браузера Safari

Вкусная китайская еда

Создаем иконку китайской еды.

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

Источник: Кальди А.

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

Шаг 1:

Создаем новый документ, произвольного размера. Заливаем его темным цветом(я выбрал градиент из темно-коричневого и серого). Затем с помощью инструмента Ellipse Tool(U), рисуем круг(заготовку под будущий значок), цвет значения не имеет.

Шаг 2:

Далее применим парочку стилей на наш слой. Для начала добавим теней Drop Shadow и Inner Shadow, так же Inner Glow Stain и зальем все градиентом Gradient Overlay—для придания объема нашему значку. С настройками всех параметров советую поиграться самостоятельно, чтобы разобраться что да как вообще должно быть, в противном случаи можете скачать исходник и посмотреть на параметры настроек.

Шаг 3:

Проделав все манипуляции, у вас должна получиться примерно такая картина:

Шаг 4:

С помощью инструмента Ellipse Selection Tool создаем выделение, в верхней части значка. Создаем новый слои и заливаем выделение градиентом от белого к прозрачному. Затем новый слой нужно сдвинуть немного левее.

Шаг 5:

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

Шаг 6:

Дублируем наш слой и перетаскиваем его, в противоположный нижний угол.

Шаг 7:

Теперь нам нужно сделать наш значок прозрачным, для этого ставим параметр Fill слоя с зеленым кругом на 0. Должно получиться следующее:

Шаг 8:

Берем изображение для значка(в моем случае это британский флаг), и размещаем его под слоем со значком.

Шаг 9:

Удаляем все лишнее, зажимаем Ctrl и кликаем по слою со значком, далее Select>Inverse(Shift+Ctrl+I) и удаляем выделение на слое с флагом.

Шаг 10:

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

Так же можно скачать исходный файл урока (в формате PSD).

Источник: Photoshop Button Maker

В этом уроке мы научимся создавать эффектное свечение, быстро и с помощью подручных средств.

Шаг 1:

Как и в почти каждом уроке, мы начинаем с radial gradient. Я выбрал переход из красного в черный. Коды цветов:

Цвет переднего плана  # 922f00

Цвет фона  # 000000

Шаг 2:

Поскольку нам нужен действительно яркий центр, дублируем слой с градиентом и выставляем ему Blending Mode -> Color Dodge.

Шаг 3:

Применяем Filter> Render> Clouds, не забудьте установить цвета background  #FFFFFF(белый), foreground -#000000(черный). Должно получиться, следующее:

Шаг 5:

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

Шаг 6:

После того, как нарисовали нашу кривую, создаем новый слой. Затем выбираем инструмент Brush Tool(B), берем тонкую и жесткую кисть, в моем случае размером 3px.

Шаг 7:

Возвращаемся к инструменту  Pen Tool. Шелкаем правой клавишей мыши и выбираем Stroke Path. Должно появиться окно, как на скриншоте. Выберите кисть и убедитесь, что стоит галочка Simulate Pressure!

Снова кликем правой клавишей мышки и удаляем кривую  Delete Path.

Шаг 8:

В результате всех манипуляций, мы получаем красивую, тонкую линию:

Шаг 9:

Теперь нужно добавить свечения нашей линии. Самый простой способ заставить нашу линию светится  изменение настроек слоя(Blending Options).

Применяем Drop Shadow с настройками, указанными на скриншоте снизу, а так же Outer Glow, для придания более интенсивного свечения.

Так же применяем Color Overlay и выбираем белый свет, чтобы было похоже на расколоченную лампу, от которой идет свет.

Шаг 11:

Добавляем еще одну или несколько линий и применяем к ним тот же эффект, в данном случае первую линию я сделал чуть толще (изменив размер кисти) и соединил все 3 линии в композицию.

Шаг 12:

На данном этапе я добавил текст и применил к нему те же настройки, что и к линиям.

Шаг 13:

Добавляем немного светящихся частиц, с помощью инструмента Brush Tool применением все того же эффекта свечения, чтобы придать работе некую "фишечку"

Шаг 14:

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

Создадим  новый слой, используя Radial Gradient, рисуем синий-белый градиент.

Шаг 15:

Затем установите для этого слоя Blending Mode -> Color c прозрачностью  50%. Наше изображение стало слегка голубоватым. Я думаю, что так смотрится гораздо лучше, нежели, чем было раньше. Так же можно раскрасить и другие области нашей картинки в разные цвета, для придания более законченного вида.

Шаг 16:

Вот и все: эффект свечения оказалось делать очень просто и быстро, можно еще самим поэкспериментировать с настройками, уверен  получится еще лучше чем у меня!

Так же можно скачать исходный файл урока (в формате PSD).

Источник: Advanced Glow Effects

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

Шаг 1:

Фоновый слой

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

Цвет переднего плана  # 2f2520

Цвет фона  # 1e1916

Шаг 2:

Печатаем наше слово. Я написал "Jelly" и использовал шрифт "Gill Sans Ultra Bold". Жирные шрифты, отлично подойдут для этого эффекта.

Шаг 3:

Теперь щелкаем мышкой по слою и выбираем Blending Options. Выставляем параметры для Drop Shadow и Inner Shadow, чтобы получилось как на рисунке снизу.

Шаг 4:

Чтобы создать основные моменты, мы используем Bevel и Emboss, настройки используем по умолчанию. Должно получиться следующее:

Шаг 5:

Далее добавим Gradient Overlay и Stroke.

Шаг 6:

Пишем еше слово, с такими же настройками стиля, но другого цвета.

Шаг 7:

Выделяем наш слой, для этого в панели слоев, с зажатой клавишной CTRL кликаем по слою.

Шаг 8:

Выбираем Select> Modify> Contract и ставим значение 4 пикселя, параметру Contract By

Шаг 9:

Теперь нам нужно залить все градиентом идущим от белого к прозрачному с помощью инструмента Gradient Tool (кнопка G).

Шаг 10:

Заливаем выделение, только что выбранным градиентом.

Шаг 11:

С помощью инструмента Elliptial Marquee Tool, выделяем нижнюю половину нашей надписи и удаляем заливку (как на рисунке).

Шаг 12:

И это все! Повторяем те же действия со слоем "style" и работа закончена.

Так же можно скачать исходный файл урока (в формате PSD).

Источник: Plastic Jelly Styles