отвечает ETNO

Интересно то, что три года назад, я тоже задавал себе этот вопрос. Так как мое знакомство с рисовалками началось именно с fireworks.

Более того, где-то целый год я делал сайты рисуя их в fireworks. Много раз садился за фотошоп, но никак он мне не нравился, конкретно не нравилось именно юзабилити шопа. Ну, к примеру, в фаере наводишь мышкой на нужное место и выделяется нужный тебе слой, в фотошопе такое тоже есть, но реализовано хреново. К примеру, если слои в группе, то когда наводишь на слой и зажимаешь ctrl+клик, то выделится не слой, как нужно было бы, а группа. Когда слоев не много, то ладно, а когда их больше 500? Неудобно блин.

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

Что ещё неудобно в фотошопе – работа с вектором. Стоит просто сказать, что фаер хавает зачастую файлы с расширением .ai, в то время как фотошоп их сначала конвертирует в растр. А чтобы открыть их в векторе, то нужно открывать отдельно иллюстратор и копировать оттуда в фотошоп.

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

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

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

Но самое большее я люблю фотошоп – это clip mask – я не знаю какого хрена до сих пор этого не сделали в fireworks, думал что в cs5 наконец-то втулят, но фиг там. Ну и конечно же кисточки, которые настраиваются как угодно, к тому же есть огромный выбор готовых.

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

Что посоветовал бы любителям фотошопа – найдите fireworks macromedia 8, именно в этой проге лучше всего реализована оптимизация картинок. Я часто экспортирую все слои с фотошопа, а потом просто пересохраняю их в этой проге – результат 15-30% меньше вес при том же качестве.

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

Все картинки кликабельны – нажмите чтобы увеличить

А теперь смотрим на работы в фотошопе

Ну или из тех, что в разработке, всё пока не покажу, но вот сделать из такого

вот так, в фаере я бы не смог. К тому же, это ещё и не вся обработка фотки, ещё многое нужно подправить.

Мониторинг сети: Недавно решил сменить свое место проживания, пока точно не определился где буду жить, но зато знаю что есть доска объявлений – аренда помещений Там и буду выбирать.

1. Skin Cancer Towel

2. WINZIP Compressed House

3. WPPED Cream Elevator Award

4. Neglected/ Invisible Children

5. McDonald’s Pole

6. Piano Stairs

7. Human Meat

8. Life Is Too Short for the Wrong Job

9. Kleenex Soap Dispenser

10. Elm Grove Police Department: Slower is Better

11. Unicef Land Mine

12. 2012. We Were Warned

13. Nikon D700: Papparazzi

14. Pantene Anti-Breakage Shampoo: Rapunzel

15. Swiss Skydive Elevator

БИГБОРДЫ

1. Panasonic nose trimmer: Fatty

2. Nestle Billboard

3. Sign from God

4. Formula Toothcare Bite

5. Imodium AD Toliet Tissue

6. Allstate Auto Insurance

7. Zimbabwean Money Billboard

8. iPod and iTunes

9. Powerhouse Gym

10. Get Organized with Peter Walsh

ПРИНТЫ

1. Findus FraichíFrites: Granny Fries without the Granny

2. International Vegetarian Union: Vegetables Are All Your Body Needs

3. Bose Noise Reduction Headphones

4. Clorets: Fishy Breath

5. Gun Central Alliance, South Africa

6. The Joy of Pepsi

7. Utopolis: Reality Sucks

8. Fortis Bank: Plastic Surgery Loans

9. Target Dri Bots Nappies: No One Likes a Bed Wetter

10. McDonald’s Baby Ronald

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

Также, стоит сказать и о ширине макета. Обычно пользуются шириной 700-800 пикселей, но путем опытов было установлено, что оптимальная ширина для меил шаблонов – это 620-640 пикселей и не спрашивайте откуда эта цифра – это результат многократных опытов, поверьте просто на слово.

А теперь подробнее о верстке.

Я бы выделил такие моменты.

1. Использовать стоит таблицы для разметки, не div

2. Ширину блока нужно указывать в столбце, а не для всей таблицы.

3. Не используйте цвет фона для бекграунда в теге body.

Проблема в том, что многие почтовики игнорят конструкцию вида

body style=”color:#fff” – вместо этого используйте

<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
   <td bgcolor=”#000000”>
   Your email code goes here.
   </td>
</tr>
</table>

4. Проверьте поддерживают ли почтовики css правила нужные вам. Посмотреть полную таблицу поддержки можете на страничке css поддержки клиентов

5. Используйте только инлайн стили

6. Прописывайте стили полностью без сокращений. Т.е. старайтесь не использовать сокращения вида border: 1px solid #000

7. Для того чтобы переформатировать все ваши стили в инлайн, вам может помочь сервис premailer

8. Для обозначения цвета ссылок используйте конструкцию

<a href="http://somesite.com/" style="color:#ff00ff"><span style="color:#ff00ff">this is a link</span></a>

9. Картинки. Следуйте нескольким правилам

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

- не используйте png

- всегда указывайте ширину и высоту картинок

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

- указывайте alt текст

- для хака hotmail используйте img {display:block;}

- для выравнивания более предпочтительнее использовать

<img src="image.jpg" align="right">

10. Для тестирования можете использовать некоторые полезные сервисы

Вот лишь небольшой свод правил. Если хотите больше и нет проблем с инглишем, то вот вам полное руководство по верстке email template

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

Мониторинг сетки:

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

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

Сразу даю ссылку на демо и на описание плагина

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

2 – легко подключается. Все что нужно – это добавить подключение скрипта.

Вот так

<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" /> 

<script src="js/jquery.js" type="text/javascript"></script> 

<script src="js/jquery.validationEngine-en.js" type="text/javascript"></script> 

<script src="js/jquery.validationEngine.js" type="text/javascript"></script>

Далее вверху странички добавляем скрипт

<script type="text/javascript">
    $(document).ready(function() {
            // SUCCESS AJAX CALL, replace "success: false," by:     success : function() { callSuccessFunction() },
            $("#your-profile").validationEngine()
            //$.validationEngine.loadValidation("#date")
            //alert($("#formID").validationEngine({returnIsValid:true}))
            //$.validationEngine.buildPrompt("#date","This is an example","error")              // Exterior prompt build example                                 // input prompt close example
            //$.validationEngine.closePrompt(".formError",true)                             // CLOSE ALL OPEN PROMPTS
        });

</script>

В котором указываем id формы которую нужно проверить

А к нужным полям нужно добавить класс, к примеру, к полю email нужно добавить class="validate[required,custom[email]". Список всех возможных валидаторов прилагается. (см описание плагина и примеры в архиве плагина) Тут есть и проверка меила, телефона, проверка на заполненность поля, на кол-во символов, на соответствие, на дату, на форматы текста. В общем много всего.   Не забывайте, что у полей также должен быть id (можно абсолютно любой)

При желании можно создавать свои функции

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

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

Пользуйтесь на здоровье.

Automatic Image Slider w/ CSS & jQuery

Просто неплохой слайдер, добавить нечего

Quicksand

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

Move Elements with Style

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

Nivo – A new jQuery image slider

ещё один интересный слайдер, самое ценное в нем, как по мне – это сам эффект перехода – очень похоже на флешевые эффекты

Animate Panning Slideshow with jQuery

а в этом слайдере интересно то, что он содержит как бы все снимки в панораме и показывает её части

SlideDeck jQuery plugin

по скрину думаю все ясно

jQuery pageSlide

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