Как делать макеты сайтов в photoshop - Создание дизайна сайта в Photoshope: знакомство с редактором и его возможностями
Как сделать макет или дизайн сайта в Photoshop
Создание дизайна сайта в фотошопе с нуля
Профессиональный макет сайта в фотошоп
Конечно если с этим никогда не сталкивался, сделать его довольно не просто, возникает множество вопросов, на которые я сегодня постараюсь ответить. Как оказывается, что материала по этому поводу в интернете не так уж и много. Дизайнеров куча, а как сделать макет сайта никто не рассказывает. Может быть я просто плохо искал? Для начала я подготовил не сложный макет, который мы будем полностью с Вами разбирать. Вот как он выглядит:. Как видите, что шаблон получился не сложный, естественно это блоговый шаблон, который позже мы будем верстать в HTML. Ну а пока что только будем рисовать. Ну а теперь поехали. Размеры зависят от того какой ширины будет Ваш будущий сайт. Вот например, Вы решили, что готовый сайт будет иметь ширину рх, следовательно размер документа нужно сделать немного больше где то рх. Это делается в первую очередь для удобства, что бы Ваш макет смотрелся так же как в браузере. По поводу высоты, выставляется размер от тематики шаблона. Но желательно делайте больше, рх думаю хватит. Это делается для того, чтобы в дальнейшем все элементы влезли. Потому что я как то сделал маленькую высоту, и мне пришлось потом переносить всё в новый документ. В моём случае сайт будет иметь ширину в рх. Таким образом я сделал документ шириной в рх и высотой в рх. Остальные настройки оставьте как есть. После того как мы создали документ, в первую очередь сделайте фон для сайта. Не важно, что это будет цвет или картинка но сделайте его. В моём случае это просто белый фон. Теперь нам нужно выставить размер будущего сайта, чтобы он выглядел так же как будет смотреться в браузере. Делать мы будем это с помощью линейки. Затем она должна появиться у Вас в окне просмотра. А сейчас нужно поставить линейку по центру нашего документа, вернее найти центр. Для этого наводим курсор на линейку на ней же зажимаем левую кнопку мыши и вытягиваем линию на наш документ. Тянем примерно на середину, линейка сама найдёт центр. После того как мы нашли центр, нужно поместить наш сайт шириной в рх в центр документа который имеет размер в рх. Далее просто кликаем по нашему белому фону и у нас появится выделенная область той ширины которая нам нужна. Теперь нашу выделенную область помещаем с помощью мышки по центру, она найдёт центр сама. Затем нужно вытащить ещё 2 линейки и установить их по обе стороны выделенной области. Таким образом мы обозначаем границы нашего будущего сайта, который будет иметь ширину в рх. Так же по этим линейка будет проще подгонять элементы дизайна. Если Вам не понятно сделайте так же как на рисунке ниже. Линейку мы будем использовать и в дальнейшем, так как без неё здесь не обойтись, она позволяет выставить всё ровно. Теперь мы практически полностью подготовили наш документ. Мы узнали середину, а так же обозначили точный размер за который не нужно вылазить. Теперь переходим к самому интересному, а именно к созданию дизайна сайта макета. Всегда создавайте группы для слоёв и давайте им названия. Потому что в дальнейшем точно запутаетесь! Это будет фон нашего верхнего меню. Теперь кликаем на голубом фоне меню и пишем название наших страниц. Потом Вы можете переместить текст куда Вам нужно. Теперь создаём разделители между страницами. И сделаем им небольшой эффект вдавленности. Затем зажимаем Shift и рисуем вертикальную линию через весь голубой фон нашего меню. По слою с фигурой нажимаем два раза мышкой, откроется окно со стилем слоя. После этого просто копируем слой с нашей линией и выставляем после каждого слова. Вот что у меня получилось:. Здесь же в меню только с правой стороны мы добавим иконки закладок. В моём случае это фигуры , но можно поставить и обычные скачанные иконки. Скачать можете вот здесь. Для начала с помощью линейки нужно выставить высоту наших иконок, что бы они были ровными. Вот , что нужно сделать:. Наводим курсор в то место где будет иконка, зажимаем Shift, для того чтобы иконка появилась ровная и растягиваем до нужных размеров. И такой же процесс повторяем со следующими фигурами. В конечном итоге вот что должно получиться:. Переходим на этот сайт и качаем шрифт. Ищем в поле со шрифтами название нашего шрифта Olivier. Кликаем на то место где будет располагаться лого и пишем название на Английском, потому что этот шрифт не поддерживает кириллицу. Вот что должно получиться:. Затем выделенную область заливаем вот этим цветом Теперь идём во вкладку Фильтры — Шум и выбираем Добавить шум. Потом выставляем такие значения:. Делаются они так же как и в верхнем меню только изменён сам цвет линии. Думаю, что вы справитесь, и должно получиться вот что:. Сейчас переходим к панели с информацией, которая будет говорить пользователю где он находится на сайте. Далее создаём новый слой, потом тем же инструментом выделяем область которая ниже и заливаем её вот этим цветом eeeeee. Вот, что у Вас должно получиться в итоге:. Переходим к разметке середины нашего будущего сайта. Нам нужно с помощью линейки разметить где будут находиться блоки постов и блок сайтбара Правой колонки. Получается что мы добавили две линии и получили область где будут находиться наши блоки с записями. Будем размечать место для правой колонки сайта. И далее делаем всё как на рисунке:. Помните мы создали группу метки? Там просто создайте слой с надписями размеров блоков, вот как у меня:. В стиле задаём размеры х Потом заливаем вот этим цветом d9d9d9. Это у нас получилась миниатюра. Теперь давайте добавим заголовок к записи. Добавляем прям под миниатюрой:. Сейчас давайте добавим кнопку Далее. Она тоже очень простая. И рисуем кнопку размера который Вам понравится:. И под блоком записей зажимая Shift рисуем круг, затем заливаем его вот этим цветом efefef. Перетащите его немного влево. И делаем круг немного меньше первого, при этом зажимая Shift чтобы круг получился ровным. Копируем слой этого маленького круга опять перемещаем его влево. Так же точно уменьшаем его размер как написано выше, чтобы получилось вот так:. Сейчас Вам нужно создать дубликат среднего круга и переместить его вправо, и тоже самое сделать с маленьким кругом. Чтобы было понятнее сделайте как на рисунке:. Сейчас размещаем блок записей под блоком. И перетаскиваем наш блок записей вниз. С помощью линии делаем вот так:. Она есть в стандартных фигурах. Затем добавляем линий как на рисунке. Это будет фон нашего заголовка, и заливаем его эти цветом eeeeee. В наш заголовок теперь нужно добавить сам заголовок, делаем это с помощью текста. А ещё добавим иконку к заголовку. Для этого нужно выбрать любую фигуру которая по душе, и которая по смыслу подходит: Не забываем зажимать Shift когда добавляем фигуру. И залейте её вот этим цветом 0dbfe5. И конечно же нужно добавить записи к нашим виджетам. И сделать ка на рисунке ниже. Затем просто создаём дубликат группы и перетаскиваем виджет вниз. Делаем то же самое что и с постами. А с правой стороны нашего футера добавляем меню такое же как сверху только без линии. Его даже можно просто скопировать и переместить вниз. Друзья, если Вам что нибудь будет не понятно, обязательно спрашивайте в комментариях. Единственно, что хотелось бы подправить — СайДбар от англ Sidebar — что значит боковая колонка а не Сайтбар. Да не многие делятся знаниями о рисовке макета. А у меня пока руки не доходят до этого. Теперь если буду затрагивать эту тему то только в Gimp, и только в видео. Разница в том, что не все могут позволить себе работу в Photoshop. Либо исходя из финансов, либо из ОС. Pantheon, все фигуры я брал от сюда http: В таком серьезном деле я новичок и есть много не понятных мне нюансов. Александр,а точно правильно указано пиксели в Фотошопе? Я ввожу так как написано у Вас,но получается вообще маленький фон. Здравствуйте, возможно Вам нужно увеличить этот фон, так как он сначала делается под экран. Увеличьте фон с помощью лупы. Спасибо за хорошую статью! Но решил дочитать до конца… Оказалось не зря, спасибо! Да, фотошоп на винду найти — это ад! На мак нашла за 1 час последние версии и ФШ, и аудишина, и примьера. А гимп прекрасная программа, соглашусь. Вот только вчера сдала по ней курсач: Выбрать в редакторе Adobe Photoshop команду меню Image — Canvas Size и таким образом можно расширить макет. Скажите, пожалуйста, где именно взять такие же иконки Социальных закладок твиттер, письмо.. По ссылкам когда перехожу там очень много всего, а нужное новичку найти сложно…. У меня иконки после скачивания и распаковки не разместились в произвольные фигуры. Зато они есть в папке в формате PNG и PSD. Когда я открыла файл PNG, открылись иконки, но они черные одну из них я вытащила на панель! Их можно как-то сделать белыми, чтобы соответствовало цветовой гамме сайта? Столкнулась с такой проблемой: При небольшом приближении очень заметен. Прикрепляю фото для наглядности. Подскажите, пожалуйста, как его избежать или избавиться? Честно говоря и хорошо и плохо. Начну с того, у кого нет фотошопа можно скачать гимп. Как выбирать цвета для сайта, какую брать ширину, так-же немаловажно упомянуть о сетке. А то получился не урок по созданию макета, а просто информация как сделался макет без ответов почему именно так, а не иначе. Вот это я ищу и никак не могу ни у кого найти: Эта тема довольно обширная, и очень тяжело вместить всё в одно: Подобные вопросы лучше всего рассматривать в отдельных постах: Понятно, что это много будет. Но не мало важно знать и понимать разные тонкости. Вот у меня проблема в том, что отсутствует гармония. Вроде все отлично, блоки выглядят красиво, но все не то. Поэтому я ищу именно тонкости при создании макета. Эх, как я Вас понимаю: Я думаю, подобное приходит с опытом: А можно я покажу Вам свой макет? Конечно он еще на стадии развития, но может Вы скажите, где у меня косяки. Я показывал другу, он говорит, что все ужасно. И мне никогда не стать дизайнером. Пора бы уже смириться. Для начала очень не плохо, главное его доделать до конца. И я бы некоторые элементы выравнял, особенно это касается цитаты сверху и поиска. Рамку цитаты по ширине выровнять бы желательно, что бы она была в стык с контентом снизу и сайдбаром. Мне кажется, что шапка как-то не подходит к общей теме. В этом у меня проблема. Может цитату вовсе убрать? Кароче, нужно немного дорисовать, потом посмотреть в общем, потому-что выглядит очень посту, на данный момент. Я по мелочи еще поработал. Еще нужно проработать некоторые детали. Пока еще пустовато, но общая тема уже реализована. Со временем может еще придумаю что добавить в футер и боковую панель. И естественно это пока только главная страница. Но на базе главной будет не сложно создать и остальные. Мне показалось, что так будет лучше. Возможно, это просто был эксперимент. Хочу как больше изучать разные варианты и тонкости, чтобы потом получалось все лучше и лучше. Думаю в этой версии стоит все-таки некоторые моменты проработать. А как сама идея? Тоесть вместо шапки, как таковой, использовать сайдбар? Я дизайном начал буквально недавно. Раньше все так себе. Первый мой дизайн был на столько вырвиглазным, что даже вспоминать неохота. Конечно, этот вариант по сравнению с первым, вообще бомба. Мне для своего сайта можно сразу фотки вставлять? Дизайн сайта JavaScript и JQuery Иконки Кнопки Шаблоны Паттерны Стоковые фото Новичкам Вёрстка Создать блог Полезное WordPress WP шаблоны Плагины Интересное Арт Визитки Красивые сайты Лого Фото Моё Новости. Photoshop Дизайн Макет Новичку Шаблон. Супер я теперь твой постоянный читатель. Костя, рад, что понравилось: Ну в принципе нет разницы где рисовать макет, главное рисовать: Рад, что статья понравилась Вам: Как говорится, век живи век учись. Спасибо огромное, век живи, век учись: Создаёте две группы, и перетаскиваете созданную группу в желаемую группу. Нажмите два раза на слое иконки. И выберите Наложение цвета. Ого, жестокий друг у Вас: Даже не знаю, может туда можно и слайдер поставить, нужно экспериментировать: Теперь его нужно сверстать! Я его еще доделаю. Футер нужно еще добавить. Потом пришлю полную версию на оценку. Хочу слышать ваше мнение. Тем более если Вы в том новичок, тогда вообще круто! На меня что-то напало и я за пару часов вот такое выдал: Ну даже не знаю, слишком просто: А слишком просто это плохо? Ну как по мне прошлый был лучше. Это моё личное мнение: Да, сама идея, конечно, отличная! Правильно, нужно разные варианты пробовать! Я доработаю макет, потом результат пришлю. Кстати как вам такой вид сайта? Молодцы,большое спасибо за статью,весь инет перерыл и только эту инфу нашел. Хорошая статья для начинаюших! Спасибо большое за урок. Самое популярное 30 красивых и бесплатных HTML и CSS шаблонов для Ваших новых проектов и сайтов Просмотров - Как сделать макет или дизайн сайта в Photoshop Просмотров - Как сверстать шаблон сайта из PSD в HTML и CSS Просмотров - 10 бесплатных JQuery галерей и слайдеров для сайта Просмотров - Основы адаптивного веб — дизайна Responsive. Или как сделать простой шаблон адаптивным. Просмотров - Бесплатные шапки для сайтов и для блогов Просмотров - Как сделать красивую тень для блока элемента с помощью CSS. Архивы Друзья Контакты Реклама и услуги.
Псевдонимы показываются случайным образом. TM Feed Хабрахабр Geektimes Тостер Мой круг Фрилансим. Хабрахабр Публикации Пользователи Хабы Компании Песочница. Ожидают приглашение Получили приглашение. Вместо вступления Любой макет создается с учетом определенных технических требований. Для макетов печатных материалов и макетов для сайтов они совершено разные. Многие начинающие дизайнеры не учитывают это и начинают творить, что душе угодно. В этой статье я напишу как сделать все грамотно и укажу частые ошибки , что повысит производительность у дизайнера и снимет головные боли frontend программиста. Тезисы Сначала я изложу основные тезисы. Многие из них претендуют на труды небезызвестного персонажа по кличке K. Мне сложно понять откуда взялась эта тенденция. Во всех профильных вузах ну на сколько я знаю раскладывают все верно: Для дизайна есть InDesign ну или QuarkXPress. Для рисования есть Illustrator ну или CorelDRAW. Для редактирования фотографий есть Photoshop. Ну и только в веб-дизайне он еще используется для сохранения картинок. Одна из моих теорий на этот счет, это незнание заказчика. Но тут есть что настроить. Web — Это переведет все размеры в пиксели. Если не уверены и в первый раз делаете веб-дизайн берите, не думайте. Но конечно он может быть любым. Главное правильно не забывать о том, что полоса прокрутки съест ширину, так что не берите ширину абсолютно равную какому нибудь разрешению экрана, берите немного меньше. Ах и да, ширина должна быть кратной двум. Один раз я встретил сайт шириной пикселя. Когда презентуешь макет в PDF длиннющие белые хвосты внизу страницах незачем. Используйте сетку Что бы макет выглядел хорошо, все элементы должны быть систематизированы. Тут речь не только о сайтах, но и о любых макетах в принципе. Сетка это основа любого макета. От нее и пляшут. Поэтому ее выбор очень важен. Для нас важны технические требования. И еще один момент, бывают макеты, где margin нулевые. Да это утверждение верно для компьютеров, где еще всяко будет пустое место на экране, но на мобильных устройствах сайт будет шириной ровно в экран и прилипший к краю шрифт будет смотреться ужасно. Не нужен будет ломать голову какой отступ делать. Разумеется отступ может быть и двойным. А так же вертикальный отступ может отличаться от горизонтального. И не забывайте собственно использовать сетку, все элементы крепите по ней. Дизайнеру в общем то без разницы где стоит элемент, но программист крепит элементы именно к сетке, так что для него крайне важно, что бы элементы никуда из нее не выползали. Используйте функционал шаблонизирования На сайтах различные элементы интерфейса и самое главное общий шаблон остается одинаковым на всех страницах. Поэтому его надо хранить в master pages. Тоже самое касается и цветов. Все цвета используем только через swatches. Это позволит не плодить кучу цветов и менять их везде одним кликом. Учитывайте не статичность сайтов В отличии от печатной продукции, сайт это динамический объект. Не забывайте в макетах создавать элементы в разных стадиях например просто ссылка, ссылка на которую навели, активная ссылка. Вы работаете с рыбой, реальные тексты будут другие У многих дизайнеров которые раньше работали с печатной продукцией остались привычки обращать внимание на мелочи форматирования текста. Я имею в виду такие вещи, как отсутствие коротких слов в конце строки или использование переноса только в одном определенном длинном слове. У вас статический контент, вы можете контролировать каждую букву и каждый пробел в отдельности. Конечно это правильно и явный признак профессионализма, когда речь идет например о журнале, но в сайте вы не сможете контролировать пользовательский контент. Так что не забывайте указывать максимально возможную длину для заголовков и тому подобные вещи. Подготовите материалы для верстки Прежде всего спросите frontend программиста, какие элементы ему понадобиться в картинках. Немного о сохранении картинок. Все надо сохранять не просто через save в photoshope, а через save for web. Небольшие элементы, элементы требующие прозрачность или содержащие шрифты сохраняем в png Графику, картинки и фоны jpeg. Следите за размером файла делайте максимально маленькими, пока визуально не сильно видно отличие. Предоставьте список используемых цветов в HEX формате. На забудьте дать все шрифты используемые в макете. И наконец обсудите с программистом все устно, это полезно всем. Разделы Публикации Хабы Компании Пользователи Песочница. Информация О сайте Правила Помощь Соглашение Конфиденциальность. Услуги Реклама Тарифы Контент Семинары.
Профессиональный макет сайта в фотошоп
Статья 259 часть 1 1
Кофеин бензоат натрия фото
Обработка днища автомобиля мастикой своими руками
3 скачать торрент механики
Карта балабаново калужской области подробная
Задача нелинейного программирования примеры