web-дизайн от А до Я
привет
Я составил для себя курс (из ссылок, советов и инструментов), чтобы научиться выполнять дизайн сайта на заказ. Думаю, он будет полезен не только мне.
Но, подчеркиваю, что все это мое личное мнение!
Уровень: для начинающих
Цель: негениальные, а грамотные дизайн-макеты.
Огромное спасибо всем авторам!
Поиск информации не был слишком трудоемким во многом благодаря форуму Demiart. Спасибо авторам тем со ссылками и авторскими статьями, и создателям ресурса!
Ваши отзывы, дополнения и исправления приветствуются.
Насколько верен мой подход, покажет время. Все материалы этого курса мной уже изучены, буду пробовать их применять
Мои советы тем, кто начинает заниматься дизайном (немного испытал все это на себе):
- Не изобретайте велосипед. До вас уже были разработаны правила, принципы, технологии. Изучите и научитесь их применять для начала. Невыполнение совета: слишком сложный и долгий путь даже к первым сносным результатам.
- Во время выполнения заказа, не пытайтесь применить или изучить те средства или инструменты, которыми не владеете. Невыполнение совета: нервы, «грязное» выполнение работы, срыв сроков.
- Во время свободного времени, пробуйте и осваивайте все новое, вспоминая также, что вы хотели сделать во время заказа, но не смогли. Невыполнение совета: неактуальность работ.
- Не замыкайтесь на работе, живите и отдыхайте. Невыполнение совета: отсутствие фантазии и идей, информационный голод.
(советую именно данную последовательность изучения)
1. Основы веб-дизайна.
- Простота в веб дизайне - Design For Masters
- Дизайн в стиле Web 2.0 - Design For Masters
- Шпаргалка для web-дизайнеров
- Что такое визуальная организация
- Блокнотик для эскизов
- Adobe Photoshop CS3 Extended
- Adobe Photoshop CS4 Extended
- Fluid Mask Photoshop Plugin
- FontExpert 2009
- Adobe Bridge CS4
- kuler (подбор цвета)
- Типографская раскладка Ильи Бирмана
- Яндекс.Рефераты (рыба)
4. Источники новостей мира веб. 5. Форумы дизайнеров (получение помощи и общение). 6. Основы работы с инструментами.
- Видеокурс по Photoshop CS3 от 3DNews (30 уроков)
- Photoshop CS4 New Features (Deke McClelland) – 21 видео
- Photoshop CS4: Little Things (Rich Harrington) - видео
- Photoshop CS4: 3D Features (Rich Harrington) - видео
- Fluid Mask Tutorials (видеоуроки)
- Работа со шрифтами (см. ниже в теме)
- Discover Adobe Kuler (видео)
- Подключение ресурсов к Photoshop
F.A.Q. ZEROlayer.ru
Паттерны / Patterns - Demiart
Стили / Styles - Demiart
Палитры / Color Swatches - Demiart
Градиенты / Gradients - Demiart
- Типографика - Demiart
- Элементы веб-типографики
- Основные термины типографики
- Знак охраны авторского права - Scrype
- Всё (или почти всё) о пробеле - Scrype
- Доллар куда будем ставить?
- Урок: Цветоведение
- Цветовой круг - Demiart
- Как подобрать безупречный цвет
- Как подобрать комбинацию цветов
- Web 2.0 Design Kit, Part 1
- Web 2.0 Design Kit, Part 2
- Полюби pen tool
- Peeling Sticker Effect
- Завернутый уголок листа
- Создание основы для стильной аватарки
- Кнопка в стиле Windows Vista
- Функциональные иконки
- Стильная шапка для сайта
Цель была лишь техническое выполнение, а не художественное
(щелкайте картинки для увеличения)
... ... ...
10. Основы композиции. 11. Юзабилити. 12. Список исходных ресурсов для макета.
- Кисти
Winter Breeze Brushes
Suddenly Spring brushes
VECTOR-CURVES - Паттерны
Micro Patterns by redheadstock
Micro Patterns by basstar
coolwing pattern1
coolwing pattern2
JanSport Patterns
Error PS Patterns 1
Screentones - Текстуры
Texture - Vol 28
Ice Texture Pack
Bokeh Textures Pack
Textures 05 - Stock Pack
Light Textures Set 1
100x100 Textures - Part 1
100x100 Textures - Part III
100x100 Textures - Part 10
100x100 Textures - Part 16
200 Текстур металла
Текстуры для Photoshop
Текстуры для Photoshop - 2 - Шрифты
Каталог шрифтов. Всё о шрифте
- Стили
Styles[/URL]
Varied Glass 2 - Формы
120.000 Shapes для Photoshop
7 наборов векторного клипарта Go Media
Go Media VectorSet 8
Go Media Vector Set 9 и 10 - Градиенты
75 Photoshop Gradients
- Макетирование - Demiart
- Прикладное макетирование - Demiart
- В продолжение темы редизайна
- How a Simple Layout - PSDTUTS
- Рыба
- CSSREMIX
- Best Photos from Past 3 Days
- CSS Design Yorkshire
- deviantART
- Best Rated Photos for last 4 Hours
- The FWA: Favourite Website Awards
- Бизнес-линч
- Usability Post
- Создание теней для сложных объектов
- Клонирование в перспективе
- Волшебная шапка для сайта
- Помещаем изображение на поверхности
- Полированный металлический логотип
- Сложенный лист бумаги
- Иконка блестящего замочка
- Putting Things In Water
- Photoshop Склад - Demiart
- Resources on deviantART
- Фотобанки - Demiart
- iStockphoto
- stock.xchng (free)
- Fotolia.com
[ - ВСЕ ДЛЯ PHOTOSHOP - DesignJunkie.ru
- ШРИФТЫ - DesignJunkie.ru
- ZEROlayer.ru
- Фотосток Alldesign.biz
- Все для Photoshop Alldesign.biz
- ArtJunkies
- photoshop-master.ru
3 Организация рабочего пространства на компьютере
Предлагаю такую иерархию папок на компьютере для дизайна сайтов:
дизайн
install
учебные материалы
ресурсы
кисти
паттерны
текстуры
шрифты
фотосток
стили
формы
градиенты
работы
*год*
*месяц*
*№_название*
*ресурсы*
*№_название*
*ресурсы*
*месяц*
*№_название*
*ресурсы*
Также советую использовать Adobe Bridge CS4 для просмотра изображений, создания коллекций (панель Collections) для получения портфолио или временного сбора изображений для просмотра.
В быстром доступе у вас должно быть 2 онлайн-инструмента: На панели задач разместите следующие значки:
Свернуть все окна | Ярлык папки «дизайн» | калькулятор | браузер | ICQ | Photoshop CS3 | Photoshop CS4 | Fluid Mask 3 | FontExpert | Adobe Bridge
6_6 Работа со шрифтами
1. Запускаем программу (можно и после Photoshop'а).
2. Внизу слева выбираем вкладку Группы
3. Щелкаем правой кнопкой мыши на левой панели и выбираем пункт Создать группу
4. Щелкаем на созданной группе правой кнопкой мыши и из контекстного меню выбираем пункт Добавить шрифты…
5. Находим необходимую папку со шрифтами, открываем ее, выделяем все шрифты (Ctrl+A) и щелкаем на кнопке Открыть
6. Выбираем способ добавления: Связанные ярлыки
7. Далее в панели Образец текста в раскрывающемся списке выбираем Мой пример текста 1 (теперь будет возможность изменять текст примера и он будет автоматически сохраняться при выборе другого шрифта)
8. Если вы хотите подключить какую-либо группу шрифтов, выделяем эту группу и щелкаем по иконке Временно активировать (шрифты сразу станут доступны в Photoshop'е). После перезагрузки компьютера все активированные шрифты перестанут быть доступны, что мне лично очень удобно. Если вы хотите вручную деактивировать группу, выделите ее и нажмите на иконке Деинсталлировать.
19 Публикация работ и информации о себе, поиск заказов
Рекомендую публиковать свои работы и информацию о себе на этом сервисе:
Free-lance.ru (нравится, что даже для незарегистрированных посетителей видна контактная информация о фрилансере).
Поиск работы удобен через ALLlance. Берет информацию о проектах с большой базы фриланс-сайтов, правда удобно пользоваться (появляется много полезных функций) только если платите 1 $ в месяц.
Также хороший форум для получения заказов на дизайн (особенно для начала):
Дизайн - Форум о поисковых системах
Вот и всё. Желаю всем удачи