Один из самых сложных аспектов проектирования — это сделать первый шаг: когда вы знаете, какой стиль вы хотели бы достичь, но вы просто не знаете, с чего начать. Мы все были там в тот или иной момент, думая про себя: «какие цвета следует использовать?», «Какие шрифты подойдут лучше всего?» И «какие элементы стиля мне нужны?»
Ну, не смотри дальше. Я собрал широкий спектр шаблонов «Get the Look», которые включают в себя все, что вам нужно для того, чтобы помочь начать новый дизайн-проект, будь то вдохновение или идеальный шрифт. Так что не ждите больше — прыгайте и смотрите «буквально»!
Кстати, я скачал шрифты, которые появляются в следующих шаблонах, из ряда мест в Интернете. Вы сможете найти их, просто выполнив поиск по адресу www.google.com . Вот взгляды, которые мы рассмотрим:
Последнее дополнение! UltraHip
Это стильно, современно, так шикарно, как хочется! В этом шаблоне есть все, что нужно для создания этого стильного UltraHip-образа.
Свежий и чистый
Ищете идеальную «тонкую линию», «чистый цвет», «простой, но изысканный» вид? Это шаблон для вас!
Винтаж ретро
Может быть, вы после этого «старомодный закусочной», «винтаж», «ретро» взгляд. Сделайте шаг назад во времени с этим отличным шаблоном.
Американский юго-запад
Привет, парднер, если вы хотите, чтобы это выглядело как «американский юго-запад», «ковбой» или «старый седан», вы попали по адресу !
корпоративный
Зайди в дверь с «профессиональным», «корпоративным», «дорогим» видом. Этот шаблон делает восхождение по корпоративной лестнице проще простого!
Получить взгляд: UltraHip
Вы когда-нибудь хотели создать сайт с «современным», «современным», «модным» внешним видом? Теперь у вас есть шанс получить UltraHip с этим классным графическим шаблоном (скачайте Часть 1 и Часть 2 ).
Цвета
С цветами UltraHip работать очень весело. Они очень яркие и прыгают прямо с экрана. Попробуйте использовать цвета, которые вы обычно рассматриваете «на краю» — цвета, которые вы обычно не используете. Некоторые из них имеют почти гладкий вид, например, очень светло-серый с оттенком пурпурного или аквамаринового.
При составлении схемы цветов UltraHip есть два пути. Во-первых, использовать цвета одного цвета. Хорошая вещь об этом методе — то, что вы можете использовать 4 или 5 цветов, не переусердствовав. Почему? Потому что цвета не конкурируют друг с другом: они дополняют друг друга. Более светлые оттенки уравновешиваются более темными оттенками, а более яркие оттенки уравновешиваются более насыщенными оттенками.
Второй метод выбора цветовой схемы UltraHip — взять цвета, которые, как вы никогда не думали, будут хорошо смотреться вместе, и использовать их. Вы будете удивлены тем, каким будет результат UltraHip. Хорошие цвета для работы — бежевый или коричневый. Оба часто рассматриваются как непривлекательные цвета, которые плохо работают с яркими цветами, но вы получите очень современный вид, если будете использовать их с яркими цветами: пурпурный и бежевый, аквамариновый и коричневый, ярко-синий и бежевый — все они орут HIP!
шрифты
Собирая коллекцию шрифтов UltraHip, я начал понимать, что на самом деле это просто набор шрифтов из разных стилей дизайна. Например, «Magneto» и «Deftone Stylus» оба являются очень «винтажными» шрифтами, но я чувствовал, что они выполнены в стиле ретро. Вкратце: не ограничивайте себя простыми современными шрифтами. Винтажные стили начинают появляться повсюду в наше время, и внешний вид постепенно превращается в «бедро». Попробуйте использовать классные скриптовые шрифты, крошечные пиксельные шрифты — все, что вы чувствуете, его «бедра» достаточно.
Я загрузил эти шрифты из нескольких мест, но вы сможете найти их, просто выполнив поиск на Google.com .
методы
1. Подобные оттенки во всем дизайне
Я коснулся этого в разделе цвета, и вот пример. Обратите внимание, что я использовал 4 разных оттенка пурпурного цвета, но дизайн не кричит «4 цвета!» Это потому, что разные оттенки играют свою роль и вместе обеспечивают хороший баланс между ярким и темным. Попробуйте эту технику с любым цветом UltraHip, регулируя только яркость, пока вы не будете довольны полученным оттенком.
2. Изменение размера шрифта и многослойного текста
Это не только отличная техника, но и чрезвычайно простая в исполнении. Начните с фразы — хорошим примером будет слоган вашей компании. Возьмите фразу и разбейте ее на небольшие части из одного или двух слов. Сохраняйте важные слова сами по себе, но объединяйте менее значимые слова, такие как «и» или «the». Чтобы сделать акцент на более важных словах, увеличить размер шрифта, уменьшить неважные слова или сделать некоторые слова меньше, а другие больше — просто экспериментируйте! Это может также хорошо работать, чтобы использовать множество цветов от того же самого оттенка. Затем, чтобы закончить, поместите слова в правильном порядке, но поиграйте с тем, как они расположены. Эта техника основана на балансе контрастных аспектов — больших и маленьких, темных и светлых. Попробуйте наложить слова и добавить немного прозрачности, чтобы получить хороший многослойный эффект.
3. Граница 1px, немного темнее заливки
Эта техника должна быть одной из моих любимых. Никаких объяснений не требуется: просто делай то, что говорит! Это такая тонкая техника, но она оказывает большое влияние на окончательный дизайн. Используйте эту технику, чтобы помочь привести ваши дизайны в стиль UltraHip 21-го века.
4. Использование цвета для различения разделов
Вы просто нашли время, чтобы выбрать великолепную цветовую схему UltraHip, и хотите использовать ее больше, чем просто свой логотип? Ну, не бойся — дерзай! Возьмите каждый цвет и используйте его, чтобы выделить определенный раздел вашей веб-страницы. Например, один цвет может быть темой вашей навигации, другой может быть фокусом вашего заголовка, а последний может использоваться для раздела новостей. Тогда просто добавьте бледно-серый цвет за контентом, и все готово! Эта техника не только будет хорошо выглядеть, но и повысит удобство использования вашего сайта, позволяя посетителям легче перемещаться по вашей странице. Обратите внимание на границу в 1 пиксель, вступающую в игру с этой техникой.
5. Нерегулярная капитализация
Эта техника может использоваться, чтобы добавить очень модный штрих к вашему дизайну, но только если используется с осторожностью и умеренностью. Если вы переусердствуете, вы только запутаете своих посетителей. Сохраняйте это простым, но эффективным. Несколько хороших типографских эффектов:
- Строчная буква «the», за которой следует заглавная буква («Портфолио»)
- строчная-верхняя строчка (welcomeTOmyWEBSITE)
- Заглавные буквы, которые сложны при использовании заглавных букв (новые, прописные)
6. Пунктирные / пунктирные линии
Это только у меня или эта техника появилась совсем немного? Видимо, довольно универсальная техника, она может легко добавить еще один современный оттенок на ваш сайт. Я просто использовал текст (- — -) для создания этих пунктирных линий.
7. Фотографии: монотонные и / или высококонтрастные
Я говорил, что границы в 1 пиксель были моей любимой техникой? Ну, я лгал: эта техника тоже чрезвычайно проста и выглядит очень современно. Просто используйте вашу любимую графическую программу, чтобы раскрасить ваши фотографии и увеличить контраст. С помощью этой техники вы можете сделать практически любое изображение «передовым» и «модным». Попробуйте раскрасить фотографию в один из цветов в вашей схеме. Это отличный способ заинтересовать посетителя, не добавляя сотни новых цветов к вашей драгоценной комбинации оттенков.
8. Основной монотонный логотип
Одна из самых больших ошибок в дизайне логотипа — усложнять ситуацию. Будь проще! Меньше — это очень часто больше, особенно когда вы пытаетесь получить внешний вид UltraHip. Опять же, попробуйте использовать цвета того же оттенка, чтобы сохранить минималистский вид. Пиксельные шрифты — отличный способ добавить текстуру или небольшое сообщение. В логотипе «AP Records», который я создал, я использовал только один оттенок и простые эффекты, чтобы создать логотип со смелым сообщением — музыкой!
Собираем все вместе
Здесь я создал образец веб-страницы, используя только методы, цвета и шрифты, упомянутые выше. Обратите внимание на то, как легко отличить каждый раздел от остальных — это облегчает поиск. Немного более темные границы в 1 пиксель тонкие, но они кричат UltraHip. Здесь собрано множество разных цветов, но они не слишком сильны — баланс является ключевым. Посмотрите на пользовательские кнопки. Используя более светлый оттенок оригинального цвета, на котором появляются кнопки, они всплывают, не занимая участок. И, сочетая несколько простых техник с несколькими советами по цвету, мы достигли одного очень модного дизайна страницы!
Получить взгляд: четкий и чистый
Вы когда-нибудь пытались добиться этого «тонкой линии», «чистого цвета», «простого, но утонченного» вида, но не получилось? Если это так, я сделал идеальный графический шаблон для вас .
Цвета
Четкие и чистые цвета обычно очень яркие и веселые. Они хорошо работают, когда вы используете похожие тона вместе, например, ярко-оранжево-красный с более светлым персиковым цветом. Кроме того, добавьте контрастный цвет, чтобы немного перемешать: если вы будете придерживаться цветов, которые не сильно контрастируют, вы столкнетесь с проблемами, когда будете помещать текст на цветной фон.
Когда вы выбираете цвета для четкого и чистого дизайна, старайтесь придерживаться максимум трех. Как только вы попадаете в четыре или пять цветов, вещи не так сильно выделяются.
шрифты
Четкие и чистые шрифты с четкими линиями. Хороший выбор — простые современные шрифты, такие как Trebuchet MS и семья Futura. Вы, вероятно, говорите себе: «Но у Грота нет простых линий». Как бы то ни было, Грот работает хорошо, потому что его линии чистые и хорошо работают с небольшой тенью.
методы
1. 1px окаймленные прямоугольные формы
Границы в 1px помогают краям фигур выделяться на определенных фонах, давая очень чистый вид. Например, если у вас очень бледно-синий прямоугольник на белом фоне, края едва заметны. Но добавьте границу в 1 пиксель, и вы получите очень чистый вид для работы.
2. Очень легкие / слабые тени
Тени помогают сделать ваш текст выпрыгивающим на пользователя. Тени лучше всего использовать на логотипах или заголовках страниц. Убедитесь, что тени падают довольно светло — если они слишком темные, они затруднят чтение текста и будут выглядеть непрофессионально.
3. Сетки и тонкие линии
При правильном использовании сетки и тонкие линии могут придать вашему сайту очень изысканный, профессиональный вид. Используйте их в кнопках, заголовках или даже для украшения угла вашей веб-страницы.
4. границы шрифта 1px
Границы 1px могут значительно улучшить читаемость вашего текста в логотипе или в строке заголовка.
5. Цветные блоки
Еще одна простая техника, которая может придать вашему веб-сайту ощущение изысканности. Эта техника особенно хороша для использования в логотипе. Попробуйте использовать блоки в качестве кнопок, но оставьте некоторые из них пустыми, чтобы не испортить эффект.
6. Слоистые прозрачные объекты
Эта простая техника дает очень крутой, многослойный вид, почти как если бы вы приклеили кусочки цветной ленты друг на друга. Просто создайте две или три разные фигуры для работы, делая их одинакового цвета и прозрачности. Тогда закончите взгляд, рассеивая их друг на друга в случайном порядке.
Собираем все вместе
Не используйте только одну технику за раз, смешайте их! В первом примере я использовал методы 2, 3 и 6. Во втором примере я использовал методы 4 и 5. В третьем примере я использовал методы 1 и 3. Обратите внимание на выбор цветов и их сходство или контраст. Также обратите внимание на то, как некоторые из этих методов могут заставить похожие цвета выделяться друг от друга.
Наслаждайтесь!
Get the Look: винтажный ретро
Хотите секреты стиля «старомодная закусочная», «винтаж», «ретро»? Вот идеальный графический шаблон для вас.
Цвета
Винтажные цвета — это те, которые выглядят как «действительно старые и изношенные». Попробуйте представить себе старую футболку начала 90-х, которую вы носили все время; бледно-оранжевый, серовато-синий, зеленый стал желто-зеленым и т. д. Это те цвета, к которым я подошел с этим шаблоном.
Чтобы получить винтажный вид, попробуйте использовать три одинаковых тона. Например, выберите темный, блекло-зеленый, блекло-зеленый-желтый и очень бледно-зеленый (который выглядит почти серым).
шрифты
Винтажные / ретро шрифты очень заметны. Просто закройте глаза и фотографию и старомодный знак закусочной. Лучший способ объяснить это: они выглядят старомодно. Одна вещь, чтобы искать это маленькие звездные формы по всему шрифту.
методы
1. Старомодные винтажные фотографии в двухцветном стиле
Я нашел это фото в Поиске картинок Google, но вы можете найти старые фотографии где угодно. Выберите красивую черно-белую фотографию и просто раскрасьте ее с помощью вашей любимой графической программы, чтобы получить старый вид.
2. Старомодные формы знака
Я придумал эти формы, просто подумав о старых фильмах и о том, как я рисую старых посетителей и заправочных станций. Придумай свое! Имейте в виду, что винтажные формы никогда не бывают симметричными.
3. Звездочки и звезды
Они были довольно популярными элементами дизайна и помогут сделать вашу веб-страницу кричащей «винтажной»! Я просто использовал звездочки, которые шли с винтажными шрифтами, которые я здесь предоставил.
4. Небольшие текстуры: сетки, диагональные полосы, поперечная штриховка
Это очень изящный трюк, который добавляет приятный штрих к дизайну вашего сайта. Используя Fireworks, я просто установил заливку формы на белый, установил флажок «Прозрачный», выбрал текстуру, установил текстуру на 100% и добавил белую рамку размером 1 пиксель, чтобы формы больше выделялись. Смотрите ваш любимый учебный сайт для получения дополнительной информации о том, как сделать это в других программах.
5. Старомодные, винтажные бордюры
Просто еще одна простая техника, которая может придать вашему сайту стиль ретро. Дизайн, который я использовал, просто напомнил мне старомодную архитектуру. Будь креативным!
6. Выровненный, границы 1px
Эта простая техника очень часто использовалась в «старые времена». Начните с рисования винтажной формы (см. Технику 2) и сделайте две ее копии. Заполните один цвет на светлой стороне. Установите другую форму без заливки и задайте для нее границу цвета в 1 пиксель на темной стороне. Теперь просто «выровняйте» два на несколько пикселей, и все готово! Эта техника на самом деле возвращается в дизайн сегодня.
7. Пунктирные линии
Я видел эту технику во время серфинга по веб-сайтам, и я всегда думал, что это круто. Посмотрите, что вы можете сделать с этим!
8. Тонкие, очерченные формы (особенно по цвету)
Еще один винтажный эффект, который я получил, просто сделав несколько скругленных прямоугольников с белыми границами 2 пикселя (без заливки) и наложив их на слои.
Собираем все вместе
Я сделал пример «винтажного» сайта, используя каждую технику, о которой упоминал выше. Обратите внимание, как не выровненные границы, винтажные цвета и старомодные элементы дизайна объединяются, чтобы создать один симпатичный ретро-сайт! Посмотрите, что вы можете придумать!
Примеры сайтов:
- http://www.joanquigley.net/flashindex.html
- http://www.sparkysgarage.com/detected.html
- http://maxfunds.com/
Наслаждайтесь!
Получить взгляд: американский юго-запад
Хотите, чтобы ваш дизайн кричал «Американский юго-запад», «Ковбой» или «Старый салон»? Не смотрите дальше: это идеальный графический шаблон для вас.
Цвета
Западные цвета часто «подрумянены» и выглядят почти поджаренными. Хотя многие западные цвета очень темные, вам не нужно работать с тусклой палитрой. Добавьте немного солнечного цвета в качестве акцентов, чтобы добавить немного специй — цвета, которые сильно контрастируют, хороши для придания этому юго-западному образу. Посмотрите на испанские палитры, чтобы подтолкнуть вас к новым идеям (не каламбур!).
шрифты
Западные шрифты часто имеют грубые края или большие засечки, поэтому следите за ними. У некоторых шрифтов есть очевидное чувство Старого Запада, но не забывайте те, которые говорят «Новый Запад». Поиграйте с некоторыми шрифтами в шаблоне. Например, Spanky’s Bungalow поставляется с несколькими различными персонажами для достижения этого «знака».
методы
1. Старая, сожженная бумага
Чтобы добиться этого, я начал рисовать фигуру с несколькими зигзагообразными краями. Я применил внутреннее свечение, используя темно-коричневый, чтобы края выглядели старыми и сожженными. Я также применил очень легкую текстуру, чтобы добавить к старому эффекту, и закончил ее с жесткой тенью. Не используйте ярко-белый для бумаги, так как это будет выглядеть слишком новым.
2. Пригвожденные деревянные доски
Их было очень легко создать в Fireworks, и они выглядят великолепно, в духе Старого Запада. Я начал с того, что нарисовал три довольно простые фигуры, которые почти совмещались. Я использовал атласную заливку, чтобы они не были сплошного цвета, и применил очень легкую текстуру конфетти, чтобы они больше походили на потертый кусок дерева. Я закончил доски с небольшими внутренними скосами, для глубины, и мягких теней, чтобы они выскакивали. Что касается ногтей, я просто нарисовал круг и придал ему радиальную заливку, прежде чем добавить небольшой внутренний скос, чтобы закончить их.
3. Избегайте сглаженного текста
Этот простой эффект придаст вашему тексту более старый и грубый вид.
4. Старая веревка
В Fireworks я нарисовал фигуру, похожую на ту, которая изображает ураган в отчете о погоде! Можно сказать, круг с двумя маленькими хвостами. К этому я добавил мягкое внутреннее свечение и гладкий внутренний скос. Я просто сделал много копий формы и соединил их в длинную линию, но не забудьте поэкспериментировать с цветами и формами!
5. Резное дерево
Для этого эффекта начните с фрагмента текста или фигуры. Залейте ваш объект цветом, немного темнее цвета дерева, в которое вы собираетесь «вырезать», и убедитесь, что ваша форма не сглажена. Чтобы закончить внешний вид, нанесите тиснение с мягкостью, установленной на «0».
Если вы используете программу, отличную от Fireworks, попробуйте добавить две тени: темную внутреннюю тень и более светлую тень и убедитесь, что тени находятся на противоположных концах вашего объекта. Если это не сработает, проконсультируйтесь с вашим любимым учебным сайтом о том, как получить рельефный внешний вид.
6. Зигзаги
Это очень популярный западный элемент дизайна. Подумайте об испанских ковриках или сумке чипсов Tostitos. Используйте различные цвета, чтобы оживить их!
7. Корова печать
Что я могу сказать? Это просто кричит Юго-Запад!
Собираем все вместе
Я объединил большинство методов здесь, чтобы создать довольно крутой юго-западный знак. Я вставил гвозди в углы старой обожженной бумаги, чтобы она выглядела так, будто она прибита к деревянной доске. Некоторые маленькие каракули (^) вырезаны на дереве, и все это подвешено на деревянной доске с веревкой. Чтобы сделать отверстия для веревки, я нарисовал два белых кружка и поставил им рельефную вставку. Текст был повернут, чтобы придать ему грубый вид. Посмотрите, что вы можете придумать!
Получить взгляд: корпоративный
Ладно, вытащите большое оружие: вы хотите создать «профессиональный», «корпоративный», «дорогой» вид. Этот графический шаблон поможет вам начать.
Цвета
Корпоративные цвета являются смелыми и яркими, но не настолько яркими, чтобы они были флуоресцентными или жесткими для глаз. Почти любой цвет может выглядеть профессионально, просто уменьшая яркость (яркость или темнота в цвете).
Используйте смелые цвета, такие как красный, синий и зеленый, чтобы показать, что ваша компания сильна и стабильна. Загар и биг будет отражать профессиональный аспект вашей компании. Смешивая тонкие цвета с яркими, вы получите лучшее из обоих миров.
шрифты
Как видите, корпоративные шрифты очень простые и почти элегантные. Подойдут шрифты с засечками и без засечек, хотя шрифты без засечек придадут вашему сайту современный вид. Держитесь подальше от ярких, декоративных шрифтов — я знаю, что заманчиво использовать их, но поверьте мне, они почти всегда выглядят непрофессионально, и ваша компания выглядит ненадежной.
Я загрузил эти шрифты из нескольких мест, но вы сможете найти их, просто выполнив поиск по адресу www.google.com.
методы
1. Вкладка навигации
Вероятно, один из самых популярных видов на корпоративных сайтах, это придаст вашему дизайну профессиональное преимущество. Поэкспериментируйте с формами и цветами вкладок: сделайте так, чтобы они торчали сверху или сбоку страницы. Основная идея здесь состоит в том, чтобы экспериментировать — на самом деле вы можете придумать бесконечное множество вещей.
2. Достаточно пустого пространства
Не слишком много, но не слишком мало — перегруженные сайты кажутся непрофессиональными и иногда липкими. Если вы оставите пустое пространство, ваш контент будет дышать и будет выделяться. Это случай «меньше значит больше».
3. Пунктирные или пунктирные линии
Это еще один чрезвычайно популярный метод. Пунктирные линии сделают ваш сайт уникальным и выделяющимся. Используйте их для разделения контента или для выделения таблиц и ячеек. Я просто использовал текст ( - - -
4. Центральный образ, который объясняет компанию
Используйте это как своего рода центральную часть, вокруг которой все будет вращаться. Здесь вы можете использовать все свои графические навыки. Включите изображения, которые связаны с вашей компанией или отражают позитивный настрой, слоган, краткие и точные отзывы, URL-адрес сайта и название компании. Не совершайте ошибку, исключая эту важную информацию. Если вы это сделаете, изображение будет только отвлекать от остальной части вашего сайта. Вы хотите сделать это то, что человек может узнать и собрать основную информацию, когда они впервые заходят на сайт.
5. Чрезвычайно простые логотипы; ничего безвкусного
Корпоративные логотипы обычно состоят из текста и основных форм. Они, наряду с некоторыми простыми эффектами, могут создавать очень профессиональные логотипы. Например, с логотипом teleCommunications я использовал много небольших эффектов для создания конечного продукта:
- «технология» — это нормально, а «связь» — жирный
- «технология» сильно кернед
- «технология» — красный, а «связь» — черный
- точки «я» в «Общении» красные, между точками тонкая изогнутая линия.
Здесь базовая форма (изогнутая линия) представляет нечто гораздо большее (общение между людьми и вещами). Обратите внимание, что я не использовал никаких сложных эффектов для создания этого логотипа: это еще один случай «меньше значит больше».
6. Чистая и простая навигация
Вы видите формирование шаблона? Здесь у нас есть еще один пример «меньше значит больше». Не поймите меня неправильно, экстравагантная навигация может выглядеть профессионально, но красота здесь заключается в ее простоте. Используйте чистый шрифт, который хорошо смотрится при небольших размерах. Поэкспериментируйте с формой пули: круг, квадрат, треугольник, крест, ромб. Обратите внимание на красоту в тонкости различных цветов пули.
7. Навигация по блоку цвета
Полностью растяните блок цвета по всей странице от границы до границы, но текст снова займет немного места, оставляя передышку. Играйте с разными пулями за ваши ссылки. Кроме того, разделите блок на меньшие коробки на одном или обоих концах. Это помогает немного разбить дизайн и добавляет очень профессиональный подход.
Собираем все вместе
Я сделал пример «корпоративного» сайта, используя каждую технику, которую я упомянул выше. Обратите внимание, как теория «меньше значит больше» объединяется в очень профессионально выглядящий сайт. Посмотрите, что вы можете придумать!