Вдохновение  является жизненно важным для фрилансеров. Это то, что заставляет наши идеи выделяться среди множества других. Однако, если мы не будем осторожны, то может это вдохновение потерять. Это случается с лучшими из нас. Мы выделяем время на работу с определенным проектом, но просто не «чувствуем» его. Вместо того, чтобы просидеть весь день, сложа руки или пролазить на Facebook и Twitter, попробуйте один из этих подходов и может быть муза вновь вернется к вам. Эти советы для фриланс-писателей, но и другие фрилансеры могут найти их интересными.

Как найти вдохновение

Вот вам несколько предложений о том, как найти себе вдохновение :

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

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

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

4. Включите музыку. Мне нравится, например, делать себе саундтреки из моих любимых мелодий на 8tracks.com. У меня даже есть различные темы — медленные, успокаивающие мелодии или музыка потяжелее, которые я меняю в зависимости от характера предмета, над которым я работаю. Знакомых мелодий, которые играют на заднем фоне, иногда бывает достаточно, чтобы вновь разжечь искру креативности и возобновить мои потоки текстов.

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

6. Займитесь зарядкой. Быстрая поездка на велосипеде или пробежка трусцой поможет вернуть вашу голову в рабочее состояние. Это может быть полезно, когда вы уже начинаете нервничать из-за вашего писательского проекта и вам нужно размяться.

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

8. Напишите что-нибудь другое. Если вам нравится фоновый шум, то местное кафе — отличное место для написания чего-либо. Если же вам нужна тишина и меньше внешних стимулов, то сходите в местную библиотеку. Это отличный способ выполнить работу, особенно, если сроки уже поджимают.

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

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

11. Помедитируйте. Или просто посидите в тишине. Поставьте таймер на десять минут и уделите внимание вашему дыханию.

12. Просто начните. Поставьте таймер на десять минут и просто начните писать на заданную тему. Без оправданий. Просто пишите. Если где-то застряли, всё равно продолжайте писать.

13. Переключитесь. Если вы обычно пишите на компьютере, то переключитесь на ручку и бумагу. Если пишите обычно ручкой, то возьмите карандаш или сядьте за компьютер. Даже если вы измените шрифт или переключитесь с MS Word’a на Google Docs или на окно WordPress — это может помочь. Не могу сказать, почему это помогает, но тем не менее помогает. Поэкспериментируйте.

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

15. Напишите письмо себе. Напишите письмо себе более старшему, более мудрому, спрашивая совет о вашем настоящем затруднительном положении. А потом, напишите себе ответное письмо, уже считая себя тем самым более старшим, более мудрым собой. Пару минут обдумайте собственные предложения. И последуйте им.

Ваша очередь
Как вы вдохновляетесь? Поделитесь своими идеями в комментариях.

Кстати, очень интересно: Как сделать прозрачный фон?

Это перевод статьи с FreelanceFolder: 15 Ways to Get Inspired

Решила немного отойти от темы фотографии и сделать перевод туториала на иллюстрационную тему. Оригинал вы можете найти здесь

Итак, непосредственно перевод:

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

Конечный результат

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

Шаг 1 – Создание фона

Поскольку наш пейзаж расположен в небе давайте выберем несколько красивых синих цветов для фона. Я решил использую #a6e3ff в качестве светлого оттенка голубого и #63c4f0 в качестве более темного.

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

Шаг 2 – Создание формы шара

Создайте новый слой и возьмите Pen Tool. Установите параметры ручки на paths и нарисуйте очертания воздушного шара. Кликните правок кнопкой мышки, выберите Make Selection и жмите OK. Теперь залейте фигуру цветом, например #45af37, как у меня.

Шаг 3 – Добавление тени на шар

Поскольку это мультяшный пейзаж я могу добавить тень со стороны неба! Для этого добавьте Drop Shadow (Layer > Layer Style > Drop Shadow).

Шаг 4 – Добавление полос на шар

Сдублируйте (Layer > Duplicate Layer) слой с шаром. Используйте на новом слое Color Overlay (Layer > Layer Style > Color Overlay) с цветом немного отличающегося оттенка, по сравнению с использованным ранее цветом. К моему зеленому подходил #76e966. Затем исмените размер фигуры (Edit > Free Transform).

Заметка! Удерживание ALT позволит вам менять обе стороны шара одновременно.

Повторяйте прошлый шаг столько раз, сколько полос вам нужно на шаре.

Шаг 5 – Добавление светового блика

Создавте новый слой и возьмите Gradient Tool. Установите передним цветом белый и настройте ваш градиент как на картинке внизу.

Выделите шар (ctrl+click на иконке соответствующего слоя) и протяните ваш градиент сверху до низу, чтобы появился блик. Снизьте прозрачность слоя до 25%.

Шаг 6 – Создание корзинки

Создайте новый слой и возьмите Rounded Rectangle Tool с радиусом 5 px. Используя коричневый цвет (#a38f3f), нарисуйте скругленный прямоугольник в ширину не привышающий нижнего края шара, а глубину смотрите на свой вкус. Затем используйте Pencil Tool чтобы выпрямить вежний край корзины.

Шаг 7 – Создание текстуры корзины

Создайте новый документ размером 6 px на 2 px с прозрачным фоном. Используйте черный карандаш и воспроизведите нижнюю картинку. Затем идите Edit > Define Pattern.

Шаг 8 – Создание дизайна корзины

Добавьте Pattern Overlay (Layer > Layer Style > Pattern Overlay) на слой с вашей корзиной и выберите только что созданную текстуру. Наложите Gradient Overlay со следущими параметрами:

Добавьте Drop Shadow со следущими параметрами:

Шаг 9 – Добавление веревок на корзину

Создайте новый слой и, используя белую кисть диаметром 1 px, нарисуйте пару веревочек от шара к корзине.Добавьте им ту же Drop Shadow что и слою с корзиной.

Шаг 10 – Добавление персонажа

Чтобы добавить персонажа в корзину, надо создать слой под слоем с корзиной и, используя кисть с черным цветом, нарисовать прямую черную линию (удерживайте shift). Затем возьмите кисти поменьше чтобы нарисовать глаза.

Содержание слоев в порядке

Очень полезно всегда подписывать слои чтобы знать для чего они и что на них изображено.

Группирование похожих (взаимосвязанных) слоев тоже позволяет быстрее находить нужное и вносить изменения.

Можете менять цвета групп двойным кликом на соответствующей иконке группы.

Шаг 11 – Добавление дополнительных шаров

Сдублируйте первый шар и измените его размер и местоположение. Выделите шар (ctrl+click) и залейте его новтм цветом на новом слое. Установите Blending mode этого слоя на Hue.

Шаг 12 – Добавление облаков

Чтобы добавить облака просто создайте новый слой и возьмите белую кисть. Для создания облаков используйте кисти разных размеров и в конце добавляйте облакам Drop Shadow со следущими параметрами:

Результат

После повторения всех предыдущих шагов мы получаем что-то вроде этого.

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

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

Фон у вас в Twitter знакомит посетителя с вашим брэндом и создает первое впечатление.

Это последний перевод из двух частей о том, как создать хороший профиль в Twitter. В первой части мы вам рассказали о пяти шагах в создании профиля в Twitter. Сейчас давайте поговорим о вашем «облике».

Создаем фон для Twitter

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

Используем бесплатные фоны в Twitter

Eсли вы хотите использовать бесплатный, легкий для установки фон в Twitter, то сначала посмотрите, что Twitter нам может предложить. На вашей странице в Twitter зайдите в Настройки профиля(Account Settings). Там вы найдете вкладку Дизайн(Design), где можете менять фон и цвета оформления вашей странички в Twitter.

Кроме этих 20 вариантов дизайна вы увидите ссылку на ColourLovers, где вы легко и просто сможете создать свой собственный дизайн. Есть еще много других ресурсов с бесплатными фонами для Twitter и вы обязательно найдете то, что подходит именно вам.

Заказываем индивидуальный фон для Twitter

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

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

Есть два основных ограничения для установки своего фона:

- Это должна быть картинка без каких-либо активных ссылок. Вы должны использовать ссылки, которые легко запомнить и не занимать слишком много места излишней информацией.

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

Берем от фона в Twitter по максимуму

Индивидуальность

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

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

Расширенное описание

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

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

Сезонная настройка

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

А какой ваш любимый фон для Twitter? Подстраиваете ли вы ваш профиль в Twitter под различные праздники и события? Если да, то замечали ли вы разницу в настроении вашей аудитории? Как обычно, ждем ваших комментариев.

Сегодня хотим предложить вам подборку для вдохновения. Тема подборки: фотографии в стиле TILT-SHIFT. Если вы не в курсе что это такое и как это делается, то можете посмотреть наш урок – TILT-SHIFT – иллюзия миниатюры.

Ну и на закуску, видео в стиле TILT-SHIFT

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

Шаг 1

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

Шаг 2

На фотографии выше я уже частично устранила место перегиба фотографии. Для этого нам понадобится Clone Stamp. Этот инструмент позволяет копировать, в нашем случае неповрежденные места, и маскировать ими повреждения. Выбирать “источники” надо очень тщательно, чтобы они подходили по цвету, текстуре, узору и т.д. (Порой это напоминает складывание паззла. ) Итак, выбираем размер кисти, устанавливаем твердость на процентов 0-50%. Опять же все зависит от фотографии: чем больше у вас мелких деталей, тем меньше и мягче должна быть кисть. Для выбора “испочника” ALT+клик на подходящем месте и начинайте аккуратно закрашивать.

итак, мы закрасили все поврежденные места.

Шаг 3

Теперь надо сделать фотографию поярче и добавить контраста.

Для восстановления яркости цветов заходим в Layer > New Adjustment Layer и выбираем Levels.

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

Шаг 4

Теперь добавим четкости.

Сдублируем оригинал и выбираем Filter > Other > High pass. Выбрав подходящий радиус, жмем ОК и меняем тип смешения слоя на Overlay.

Шаг 5

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

Создаем новый слой (Ctrl+Shift+N) и заливаем его полностью черным цветом. Затем берем мягкую кисть большого диаметра, меняем цвет, как на картинке вверху и закрашиваем центр. Теперь меняем тип смешения слоя на Soft Light и по желанию снижаем процент прозрачности (в моём случае 59%).

Результат

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

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

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

Изучите блочную модель CSS

Это одна из первых вещей, с которой вам необходимо ознакомиться, чтобы в дальнейшем успешно достигать межбраузерной совместимости лишь с небольшим количеством доработок. К счастью, блочная модель не так и сложна для понимания и, обычно, одинакового работает во всех браузерах, кроме ситуаций, связанных с различными версиями Internet Explorer (об этом позже).

Блочная модель CSS отвечает расчет :

- Сколько места занимает блок каждого элемента
- Наслаиваются/корректно ли отображаются границы или поля
- Размеры блоков
- В некоторой степени, положение блока относительно остального содержимого страницы

Блочная модель CSS имеет несколько основных правил:

- Блочные элементы в основном прямоугольны(как и, собственно, все другие элементы)
- Размеры блока вычисляются с шириной, высотой, отступом, границами и полями
- Если высота не указана, то блочный элемент будет высотой с весь тот контент, который он в себе содержит плюс отступы(за исключение того, если там есть «поплавки», об этом ниже)
- Если не задана ширина, то не плавающий блок расширится до исходного размера минус отступ(больше об этом дальше)

Некоторые важные вещи, которые стоит помнить, когда работаете с блочными элементами:

- Если ширина блока выставлена на «100%», то у него не должно быть никаких полей, отступов или границ, иначе он залезет за исходник

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

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

- Правила и принципы, указанные выше, работают при условии, что страница, содержащая блочные элементы, отработана по стандартным схемам (пункт был добавлен после обзора комментариев)

Блочная модель, как мы ее видим, используя Firebug в Firefox

Изучите разницу между блоками и встроенными элементами

Для опытных разработчиков, это очередная вещь, не требующая размышлений. Но, тем не менее, это очередная важная область, которую, если понять, то  получится “Эврика!”  и множество проблем в дальнейшем можно будет избежать, и вы будете чувствовать себя более уверенно при создании разнобраузерных макетов.

Картинка ниже показывает разницу между блочными и встроенными элементами:

Несколько основных правил, отличающих блочные элементы от встроенных:

- Блочные элементы, по умолчанию, свободно расширяются по горизонтали до размеров исходника, поэтому не нужно выставлять ширину на «100%»

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

- Встроенные элементы игнорируют настройки ширины и высоты

- Встроенные элементы перемещаются с текстом, подчиняются заданным типографическим настройкам, таким как интервалы, размеры шрифты, отступы (white-space, font-size, letter-spacing)

- Встроенные элементы могут выравниваться используя функцию  вертикального выравнивания , а блочные элементы — не могут.
У встроенных элементов будет некоторый отступ вниз для того, чтобы соответствовать некоторым элементам текста, например буква “g”)

- Встроенный элемент станет блочным, если он плавающий

Изучите «плавание» и обнуление (Floating, Clearing)

Для макетов с несколькими колонками, которые довольно легко обслуживать, лучший способ — использовать «floats». Если вы точно уверены, что знаете, как работают поплавки, то это важный шаг к достижению межбраузерного соответствия.

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

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

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

- Чтобы заставить содержание обтекать плавающий элемент, то оно должно быть либо встроенным, либо «плыть» в том же направлении

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

- Если блочный элемент содержит в себе подчиненный плавающий элемент, то он «схлопнется», что потребует исправления

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

- Элемент, который и обнулен и плавающий — очистит себя от элементов, идущих До, но не После

Сначала используйте Internet Explorer (или не используйте)

Примите к сведению, что мы настоятельно не рекомендует использовать для разработки сайтов сначала Internet Explorer. По нашему мнению, сайты должны разрабатываться для «современных» веб-браузеров, сначала под их стандарты, а потом уже «подгонять» под «глючные» версии IE. Согласны или нет? Комментарии под статьей!

Большая часть того, что мы обсуждали касалась принципов CSS-кодинга и шаблонов. Этот же принцип больше посвящен привычкам и предпочтения большинства дизайнеров. Несмотря на то, что мы можем ненавидеть использование IE6 и IE7 для каждодневной деятельности в интернете, но когда дело касается написания проекта с нуля, то практически самое лучшее, что вы можете сделать — тестировать ваш шаблон на ранних этапах работы именно на этом браузере. Возможно, даже стоит открыть независимую версию IE6 или IE7  и начать разработку в этом браузере.

Конечно, у вас не будет доступа к таким вещам, как Firebug, но, по большому счету, для CSS(особенно на ранних этапах разработки) вам и не нужен Firebug. Намного легче заставить шаблон работать сначала на IE6 и IE7, а потом уже подправить его для других браузеров, чем делать это каким-то другим путем. Если в процессе разработки вы будете ждать до последнего, прежде чем открыть IE6 и/или IE7, то скорее всего столкнетесь с некоторыми, а может и вовсе — со всеми, из следующих проблем:

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

- Шаблон в некоторых местах потребует переработки, увеличивая время вашей работы

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

- Шаблон не будет для других браузеров таким же, как в IE6 и IE7

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

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

Изучите основные проблемы Internet Explorer

Если вы собираетесь использовать IE в процессе разработки или для проверки шаблонов в нем, то вы обязательно должны знать, каковы его возможности и то, с чем у IE (особенно 6 и 7 версии) возникают проблемы.

Подробная дискуссия о каждой из возможных проблем, которые могут возникнуть в Internet Explorer, и список  всех невместимостей с CSS  – точно выходит за рамки этой статьи. Но есть некоторые очень серьезные несоответствия и проблемы в использовании CSS под IE, которых разработчикам следует опасаться. Приведем краткое изложение проблем, с которыми вам придется иметь дело:

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

- IE6 может дублировать поля у плавающих элементов со той стороны, в которую они «плывут»; опция  display: inline  часто убирает эту проблему

- В IE6 и IE7 могут возникнуть проблемы, если элемент  не имеет разметки , например поля наслаиваются неправильно, фон не отображается  и многие другие

- IE6 не поддерживает минимально и максимально заданные показатели, например  min-height, или  max-width

- IE6 не поддерживает фиксированное размещение фоновых картинок

- IE6 и IE7 не поддерживает большинство дополнительных значений для опции  display (например  inline-table,table-cell, table-row, и т.д.)

- Вы не можете использовать псево-класс  :hover  ни на каком из элементов в IE6, кроме «анкера» ()

- Некоторые версии IE слабо поддерживают некоторые селекторы CSS (например attribute selectors, child selectors, и т.д.)

- Версии IE 6-8 плохо поддерживают CSS3, но  есть некоторые обходные пути

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

Некоторые вещи никогда не будут выглядеть как надо

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

Формы всегда будут выглядеть по-разному

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

Посмотрите на картинку ниже, которая показывает опцию select в элементах главной страницы  Facebook  в пяти разных версиях браузеров (взято с  Adobe’s Browserlab):

select элементы с опцией   выглядят по-разному в разных браузерах.

Некоторые элементы форм можно проконтролировать визуально. Например, если клиент требует, чтобы кнопка «submit» выглядела одинаково во всех браузерах, то это еще не проблема — вы можете просто использовать картинку, вместо обычного, который, как и select, будет выглядеть по-разному в разных браузерах.

Другие элементы форм, например кнопки радио, поля для текста и ранее упомянутый select , просто невозможно вписать под один стиль в разных браузерах без использования усложненных методов, вроде  JavaScript плагинов(которые, как считают некоторые разработчики, покоробят впечатление пользователей).

Типография всегда будет выглядеть по-разному

Другая сфера, от которой мы не должны ожидать соответствия вплоть до пикселя — это шрифты, а особенно — шрифты в основном тексте.  Разные способы  придумали, чтобы решить проблему отображения шрифтов в заголовках, недавно запущенный  Google Font API  также создан для этого. Но основной текст, скорее всего, всегда будет выглядеть по-разному в разных браузерах.

С типографией, мы сталкиваемся не только с проблемой доступности шрифтов на разных машинах, но, в некоторых случаях, даже если шрифт доступен и на обеих машинах, то он все равно выглядит по-разному. Например, Windows ClearType доступен для IE7, но не для IE6, что заставляет шрифты выглядеть иначе под разными версиями IE.

График ниже показывает снимки с  A List Apart  под IE6 и IE7. Шероховатый текст в IE6 более заметен в заголовке, чем в основном тексте, но все отображения текстов явно отличаются в разных браузерах(если текст, конечно, не картинка):

Типография A List Apart в IE6 и IE7

Используйте CSS reset

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

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

Откат настроек CSS показан в панели инструментов разработчика в Firefox

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

Используйте справку SitePoint о CSS

Если у вас возникли проблемы с отображением некоторых аксессуаров CSS под разными браузерами, то обязательно посмотрите  справку SitePoint о CSS , чтобы проверить ограничения по совместимости. Справка SitePoint о CSS(которая доступна и в книжном варианте, но не столь обновленная) включает в себя полезные сведения о совместимости с разными браузерами любого стандартного аксессуара CSS.

Таблицы SitePoint по совместимости для настроек CSS

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

Используя это, как справочник, вы сможете просчитать возможности и определить причину возникновения ошибки — будь то либо ошибка браузера, либо собственное неверное использование или недопонимания аксессуара CSS.

Заключение

Хоть и есть много того, о чем можно было бы поговорить на тему о межбраузерной совместимости CSS, принципы и наставления, которые я вам предоставил, должны помочь разработчикам CSS в создании наиболее схожего отображения под разными браузерами. Межбраузерная совместимость — доступная цель, но в разумных пределах.

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

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

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

1# findicons.com

2# www.iconfinder.com

3# www.iconlet.com

4# www.iconseeker.com

5# www.veryicon.com

6# www.iconlook.com

7# icons-search.com

8# www.iconlib.info

Туториалов с текстом у нас еще не было. Этот будет первым

Оригинал смотрите на Tutorial9 здесь

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

Что мы будем делать

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

Прежде чем начнем, скачайте нужный шрифт: Nevis Bold

Шаг 1 – Фон

Поскольку этот эффект лучше всего выглядит на темном фоне, давайте создадим соответствующий. Используя цвета #0f1c25 и черный создайте radial gradient посередине вашего документа.

Шаг 2 – Написание текста

Давайте напишем текст под наш эффект. Лучше всего будут выглядеть жирные и объемные шрифты.

Шаг 3 – Установка стиля слоя

Выберите Blending Options (клик правой кнопкой на слое и выбираете Blending Options).

Следуйте инструкциям на картинках ниже для наложения эффекта:

Drop Shadow

Outer Glow

Цвет #afd3e2

Inner Glow

Цвет #93c1d4

Gradient Overlay

Цвета от #afd3e2 к белому.

Результат

Согласно Отчету по маркетинговой индустрии в соц. сетях за 2010 год, Twitter является одним из полезнейших инструментов соц.сетей, о котором люди, ведущие бизнес хотят знать больше.

Если ваш бизнес еще не представлен на Twitter , то эта статья как раз для вас. Создать профиль в Twitter можно легко и быстро, тем не менее, нужно удостовериться, что вы всё делаете правильно.

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

#1: Создайте профиль в Twitter

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

Будет ли у вас несколько профилей? Twitter может отнимать много времени. Поэтому проще иметь лишь один основной профиль. Но если у вас различные темы для разной публики, то тогда имеет смысл иметь несколько профилей. Две основные причины для содержания нескольких профилей в Twitter :

- Отделить деловую переписку от личной
- Использование нескольких языков для сообщений

Стоит ли вам использовать профиль фирмы или личный? Или оба? Это зависит от вашей компании, от того, как и с кем вы собираетесь общаться в Twitter.

Энн Хэндли переписыватся в Twitter под именем @MarketingProfs для www.MarketingProfs.com и связывает свой личный профиль с профилем MarketingProfs.

#2: Выбери себе имя в Twitter

Вот несколько рекомендаций, чтобы помочь вам выбрать имя для Twitter:

- Ваше имя ограничено 15 символами

- Также, имена в Twitter не чувствительны к регистру, Twitter сохранит ваше имя точно так, как вы его введете при создании. Если вы наберете свое имя как @JohnSmi th, то вас будут видеть как @JohnSmi th, но смогут вас найти и через запрос по @johnsmith.

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

Вы до сих пор не знаете, какое имя выбрать себе в Twitter? Найдите имя, которое будет ассоциироваться с вами и с тем, чем вы занимаетесь.

Использовать ваше настоящее имя или название фирмы? Большинство людей считают более надежными тех, кто использует имена, схожие с настоящими или названия знакомых фирм. Если вы используете Twitter для рекламы вашей фирмы, то вам наверняка захочется использовать название вашей веб-страницы(без “.com” ) . Вы также можете использовать и свой обычный псевдоним.

Дорин Иануззи в Diversity Media Services комбинирует оба варианта — и ее имя, и аббревиатуру названия ее компании.

Seesmic.com использует их название в Twitter.

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

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

#3: Загрузите вашу картинку

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

Фото Дэна Уолдшмидта соответствует «нестандартному видению», о котором он рассказывает в описании(bio).

#4: Используйте наилучшую ссылку

Вы можете использовать лишь одну активную ссылку в вашем профиле в Twitter. И, прежде чем вы выберите ее, то просмотрите всю вашу маркетинговую стратегию. Почему вы в сети? Куда вы хотите переадресовывать ваших читателей? Почти у всех ссылка в Twitter ведет на их блог или сайт. Ссылку всегда можно сменить.

Нужно рассмотреть на какую конкретно страницу будут переходить из вашего Twitter-профиля.

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

- Вы можете сослаться на свой профиль в соц. сети, как сделала @AmyPorterfield с ссылкой на OneForty

- Если вы блоггер, то ссылка на ваш блог — хороший выбор.

#5: Сделайте хорошее описание в Twitter

Важно рассказать вашим читателям в Twitter кем вы являетесь и о чем собираетесь писать. К сожалению, на это вам отведено лишь 160 символов. Обычно используются короткие предложения, которые заинтересуют потенциального читателя. Следует также включить несколько ключевых слов, на которые будут ориентироваться ваши читатели.

Так же можно упомянуть ссылку на вашу Facebook или Вконтакте фан-страничку в вашем описании в Twitter или на фоновой картинке.

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

Есть ли у вас советы по Twitter? Используете ли вы настоящее имя или название фирмы в Twitter? Поделитесь с нами в комментариях.

Fontfabric была основана в 2008 году Светославом Симоновым который живёт и работает в Софии, Болгария. Цель студии, как они сами  пишут, создание красивых и профессиональных шрифтов. На их веб-сайте можно как купить так и скачатъ бесплатно большое количество разных шрифтов.

Кирилические шрифты.

1# DAN шрифт

Скачать

2# MOD шрифт

Скачать

Латиница

1# Dakar шрифт

Скачать

2# VAL Stencil шрифт

Скачать

3# LOT free font

Скачать

4# FILE шрифт

Скачать

5# Cube 02 шрифт

Скачать

6# Facet шрифт

Скачать

7# ZAG шрифт

Скачать

8# Cube шрифт

Скачатъ