Разработка уникального дизайна сайтов. Профессиональный подход!

Создание дизайна сайта в Photoshop. Урок 1 прототип

/ Сергей Нуйкин / Веб-дизайн



Ребята приветствую на fotodizart.ru, всем хорошего настроения.

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

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

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

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

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

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

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

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

Понравилась статья?
Подпишитесь на обновления сайта:


Поделитесь статьей с друзьями:

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

Комментарии к статье:
    • Webliberty:

      Сергей, привет! Отличный урок, просмотрел от начала до конца. А с чем связан в модульной сетке выбор высоты строки 18px? Оперировать круглыми значениями для меня намного легче)

    • Сергей Нуйкин:

      Привет, Денис! Спасибо!
      Можно выбрать и 20px все зависит от кегля и выбранного шрифта. Текст должен располагаться в пределах шрифтовой сетки. Я просто уже больше по привычке использую эти параметры в основном во всех макетах, считаю, они оптимально подходят для работы. Шрифт использую для текста 15 для заголовков 18 не для всех конечно, но как-то так. Тут учитываем, по сути, еще межстрочный интервал, сам понимаешь если между строк мало места то текст читается тяжело, когда много тоже и вот тут нужно найти соотношение размер шрифта, межстрочное расстояние и опираясь на все эти параметры получается шрифтовая сетка.

    • Webliberty:

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

    • Сергей Нуйкин:

      Денис, в некоторых блоках иногда используют специально шрифты разного размера. А по поводу правок шаблона, так я думаю, не ты один это делаешь. Я периодически что-то изменяю, как и ты, классы нахожу в css, считаю это нормально движению к лучшему, идеала не существует. :)

    • Webliberty:

      Совершенству нет предела :smile: И это правильно!

    • Сергей Нуйкин:

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

Добавить комментарий:

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: