В этой статье мы поговорим о том, как сделать дизайн сайта на основе прототипа, а так же о тонкостях, которые нужно учесть при его отрисовке. Чтобы сделать дизайн сайта нам понадобятся: прототип, фотошоп и немного воображения.
Статья получилась более чем объемная, поэтому рекомендую запастись терпением, а чтобы было ради чего стараться - покажу вам конечный результат, который вы можете скачать в начале статьи.
Отрисовываем фон и контентные блоки
Открываем наш прототип и отключаем все слои, сначала будем рисовать фон. Наш фон делится на две части: темная плашка под шапку и светлый фон в качестве основного. Темная плашка занимает примерно 330px по высоте и растягивается на всю ширину экрана. Нарисуйте ее при помощи прямоугольника, использовав при этом темно-синий цвет (#2f353e). Отлично, половина работы уже сделана.
Использовать монотонный цвет как-то уныло, поэтому предлагаю разбавить его текстурой. По секрету расскажу вам про один замечательный сайт с отличными текстурами. Вот он . Далеко ходить я не стал и на 24 странице нашел подходящую текстуру, которая называется Type (см. в дополнительных материалах). Размножьте ее по всей плашке, изменив режим наложения слоя с текстурой на Difference и прозрачность на 60% .
Остальной фон залейте светло-серым цветом (#f0f0f1).
Теперь перейдем к отрисовке контентных блоков, а шапку оставим на десерт, но разметить место под нее все же придется. Для этого отступите от верхнего края примерно 105px и, опираясь на сетку, нарисуйте светло-серый прямоугольник во всю высоту макета.
У меня он оранжевый, но вам нужно сделать таким же цветом, как и фон. Теперь можно приступить к созданию блока с информационными ссылками. Его высота равна 230px и заканчивается вместе с темной плашкой.
Этот блок делится на две равные сущности: Для новичков и Для профессионалов . Как вы помните, ранее, я просил отключить вас все слои в прототипе. Настало время включить папку Noobs (помечена красным цветом). Удалите все слои в этой папке за исключением буллитов, ссылок и заголовков, причем заголовки выровняйте относительно ссылок. У вас должно получиться нечто подобное.
Если вам не нравятся буллиты (в нашем случае стрелки) – неплохие решения всегда можно найти на таком замечательном сайте, как iconfinder .
Заголовки имеют несколько другие параметры: размер текста 20 px , цвет текста #2f353e и отступ между заголовком и ссылками 25 px .
Как сделать дизайн сайта более живым и динамичным? Все просто. В дополнительных материалах есть неплохой набор теней для контентных блоков и изображений. Выберите понравившуюся вам тень и скопируйте ее на наш макет, разместив под плашку с ссылками.
Если вам не понятно, что конкретно должно было получиться – смотрите результат моей работы:
Отлично, давайте займемся контентным блоком, размер которого составляет 650px в ширину. Если верить прототипу, то контентная часть у нас состоит из мини-блоков. В каждый мини-блок входит миниатюра, анонс и некоторые информационные данные. Помимо прочего, каждый мини-блок имеет внутренний отступ 30px слева и справа.
Соответственно, у нас остается только миниатюра, анонс и краткая информационная часть. Давайте приступим к их отрисовке. И так. Для начала включите папку Content (помечена оранжевым цветом). Удалите из папки все лишние слои, о которых мы говорили выше и уменьшите миниатюру до 150px. Вот что у меня получилось:
Смотрится гораздо лучше. Теперь наведем лоск и изящество. Начнем с заголовка: цвет #000000 , размер 26px , отступ от заголовка до миниатюры 20px . Миниатюра имеет размер 150x150px . Если есть желание, можете применить к миниатюре тонкую обводку светло-серым цветом, но более контрастным, чем фон.
По моей задумке, информационная часть и краткий анонс не должны вылезать за рамки миниатюры по высоте. Тогда все будет чисто и красиво, что тоже имеет большое значение.
Информационную часть мы перенесли над анонс. Давайте и ее оформим в соответствии с дизайном. Для того, что бы исключить такие слова, как «Опубликовано» и «Рублика», я нашел несколько отличных иконок (см. в дополнительных материалах) на уже знакомом нам сайте iconfinder.
Кстати! Не забудьте на этапе верстки все иконки , для более быстрой работы сайта.
Оформите информационную часть так, как показано на рисунке ниже, применив к тексту и иконкам следующие параметры: цвет серый (#abacac), размер 12px.
Краткий анонс тоже не мешало бы изменить: цвет #000000, размер 14px , межстрочный интервал 20px , отступ между информационной частью и анонсом 30px .
Отлично, первый мини-блок готов. Размножьте его раз 5-6 вниз c интервалом примерно 60-70px.
СОВЕТ: Скопировать слои очень просто. В панели слоев с зажатой клавишей SHIFT выделите все необходимые вам слои (в данном случае кликните на первый и последний слой в папке Content). Затем, на панели интсрументов выберите Move Tool (V) и с зажатой клавишей ALT перетащите слои вниз. Если вы хотите перенести слои только в одну сторону, допустим только вниз, помимо клавиши ALT зажмите так же клавишу SHIFT .
Наш контентный блок готов.
Сайдбар и футер
Теперь попытаемся отрисовать сайдбар. В ширину он занимает 300px и отделяется от контентного блока визуальным разделителем в виде небольшой тени. Думаю, каждый из вас сможет ее нарисовать, при помощи градиента или обычной линии размытой фильтром Gaussian Blur .
В принципе, сайдбар сделан полностью по прототипу, так что никаких затруднений с его реализацией быть не должно. Я думаю, как сделать дизайн «Популярные записи», «Рублики» и «Топ комментаторов» — объяснять не нужно. Весь процесс описан выше. А вот как сделать подписку на обновления я сейчас покажу.
Давайте разберемся, из чего состоит блок подписки, тогда его будет легче реализовать. У меня это: плашка с текстурой, четыре иконки, тень, форма ввода e-mail, кнопка и полоски, символизирующие почтовый конверт.
Размер блока подписки составляет 190x330px . Разметим эту область при помощи белого прямоугольника.
Добавим текстуру, найденную на уже известном нам сайте . Иконки идем искать на iconfinder , а полоски легко нарисовать самим, либо вырезать из какого-нибудь нагугленного конверта.
Тень берем из дополнительных материалов, в конце статьи. Форму ввода нарисовать очень просто, да и кнопку подтверждения тоже, применив к прямоугольнику зеленого цвета (#499759) и радиусом скругления 3px следующие параметры:
Нарисовать дизайн не так уж и сложно, не правда ли? Но мы еще малость не закончили. У нас остался футер, шапка и постраничная навигация. Текстура футера и шапки идентичны. постраничная навигация рисуется при помощи обыкновенных прямоугольников, активный пункт обозначаем зеленым цветом (#499759). Знак «©» можно легко найти в моей .
Теперь, когда из всего дизайна мы не нарисовали только шапку, можно немного расслабиться и полюбоваться красотищей.
Шапка
Давайте продолжим. Если честно, я не думаю, что вам следует брать тот же логотип, который используется в данном макете. Вы, конечно, легко можете положить удалить текст, оставив один знак и написать на его место свой.
Но я предлагаю поступить следующим образом. Заходим на и ищем подходящее изображение, желательно в той же цветовой гамме, что и макет. Пишем рядом с ним название сайта и слоган - вуаля, логотип готов.
Меню тоже делается очень просто. Прописываем пункты меню слегка голубоватым цветом (#d6dbdf). Активный пункт выделяем темно-синей плашкой (#14191f), к которой применяем следующие параметры:
Иконки я нашел на iconfinder и изменил их немного под наш дизайн.
В заключении
Я очень доволен тем, что в итоге получилось. Так же надеюсь, что вам было не очень скучно читать всю эту писанину и вопрос больше не возникает в ваших светлых головах. Подпишитесь на обновления , чтобы не пропустить очередной классный свежачок.
По многочисленным просьбам читателей, мы сегодня будем делать дизайн, вернее макет сайта в Photoshop. Конечно если с этим никогда не сталкивался, сделать его довольно не просто, возникает множество вопросов, на которые я сегодня постараюсь ответить. Как оказывается, что материала по этому поводу в интернете не так уж и много. Дизайнеров куча, а как сделать макет сайта никто не рассказывает. Может быть я просто плохо искал? :)
Продолжение
В общем давайте уже делать.
Для начала я подготовил не сложный макет, который мы будем полностью с Вами разбирать. Вот как он выглядит:
Как видите, что шаблон получился не сложный, естественно это блоговый шаблон, который позже мы будем верстать в HTML. Ну а пока что только будем рисовать. Ну а теперь поехали.
Программное обеспечение
Первое, что Вам нужно это Photoshop. Если у Вас его нет, покупайте:-)
Создание и размеры документа
Чтобы создать новый документ в Фотошопе нужно зайти в «Файл» и кликнуть «Создать», затем появится окно, в котором нужно задать соответствующие размеры.
Размеры зависят от того какой ширины будет Ваш будущий сайт. Вот например, Вы решили, что готовый сайт будет иметь ширину 1000 рх, следовательно размер документа нужно сделать немного больше где то 1200 рх. Это делается в первую очередь для удобства, что бы Ваш макет смотрелся так же как в браузере.
По поводу высоты, выставляется размер от тематики шаблона. Но желательно делайте больше, 4000 рх думаю хватит. Это делается для того, чтобы в дальнейшем все элементы влезли. Потому что я как то сделал маленькую высоту, и мне пришлось потом переносить всё в новый документ.
В моём случае сайт будет иметь ширину в 1200рх. Таким образом я сделал документ шириной в 1300 рх и высотой в 4000 рх. Остальные настройки оставьте как есть.
Фон шаблона сайта
После того как мы создали документ, в первую очередь сделайте фон для сайта. Не важно, что это будет цвет или картинка но сделайте его. В моём случае это просто белый фон. Выбираем инструмент «Заливка» в палитре цветов выбираем белый цвет, затем просто кликаем по фону.
Ширина будущего сайта в 1200 рх
Теперь нам нужно выставить размер будущего сайта, чтобы он выглядел так же как будет смотреться в браузере. Делать мы будем это с помощью линейки. Если она у Вас не активна, нужно зайти в «Просмотр» и поставить галочку на против «Линейка». Затем она должна появиться у Вас в окне просмотра.
А вот как она выглядит:
Выделяем наш слой, нужно просто один раз кликнуть на него:
А сейчас нужно поставить линейку по центру нашего документа, вернее найти центр. Для этого наводим курсор на линейку на ней же зажимаем левую кнопку мыши и вытягиваем линию на наш документ. Тянем примерно на середину, линейка сама найдёт центр.
После того как мы нашли центр, нужно поместить наш сайт шириной в 1200 рх в центр документа который имеет размер в 1300 рх. Для этого выбираем инструмент «Прямоугольная область», сверху устанавливаем Стиль на Заданный размер, куда пишем вот такие значения: ширина — 1200рх, высота 400рх. Далее просто кликаем по нашему белому фону и у нас появится выделенная область той ширины которая нам нужна.
Теперь нашу выделенную область помещаем с помощью мышки по центру, она найдёт центр сама. Затем нужно вытащить ещё 2 линейки и установить их по обе стороны выделенной области. Таким образом мы обозначаем границы нашего будущего сайта, который будет иметь ширину в 1200 рх. Так же по этим линейка будет проще подгонять элементы дизайна. Если Вам не понятно сделайте так же как на рисунке ниже.
Линейку мы будем использовать и в дальнейшем, так как без неё здесь не обойтись, она позволяет выставить всё ровно.
Теперь мы практически полностью подготовили наш документ. Мы узнали середину, а так же обозначили точный размер за который не нужно вылазить. Теперь переходим к самому интересному, а именно к созданию дизайна сайта (макета).
Создание дизайна или макета сайта
Важно!
Всегда создавайте группы для слоёв и давайте им названия. Потому что в дальнейшем точно запутаетесь!
Группы
Создаём группу, и называем её «Хидер» (Шапка) в ней же создаём под группу «Верхнее меню» так как будем начинать именно с него. В группе создаём новый слой и называем его «фон». Это будет фон нашего верхнего меню.
Вот что должно получиться:
Верхнее меню
Опять вытягиваем линейку и выставляем её как на рисунке:
Выбираем инструмент «Прямоугольная область» и выделяем вдоль горизонтальной линейки:
В палитре цветов вбиваем вот этот цвет #0dbfe5, выбираем инструмент «Заливка» и заливаем выделенную область, затем нужно отменить выделение во вкладке «Выделение» нажмите на «Отменить выделение»:
Кликаем на инструмент «Горизонтальный текст». Сверху в панели выбираем шрифт «Segoe UI». Теперь кликаем на голубом фоне меню и пишем название наших страниц. Потом Вы можете переместить текст куда Вам нужно.
Теперь создаём разделители между страницами. И сделаем им небольшой эффект вдавленности. Создаём новый слой, выбираем инструмент «Линия». Затем зажимаем Shift и рисуем вертикальную линию через весь голубой фон нашего меню.
По слою с фигурой нажимаем два раза мышкой, откроется окно со стилем слоя. Ставим галочки на против «Наложение цвета» И вбиваем туда вот этот цвет #0aaacc.
Переходим в пункт «Тень» и задаём следующие параметры:
Вот, что должно получиться:
После этого просто копируем слой с нашей линией и выставляем после каждого слова. Вот что у меня получилось:
Иконки социальных закладок
Здесь же в меню только с правой стороны мы добавим иконки закладок. В моём случае это , но можно поставить и обычные скачанные иконки. Скачать можете вот .
Для начала с помощью линейки нужно выставить высоту наших иконок, что бы они были ровными. Вот, что нужно сделать:
Потом создаём группу, называем её «Социальные закладки», создаём в ней новый слой. Теперь кликаем по инструменту «Произвольная фигура» выбираем нужную фигуру:
Наводим курсор в то место где будет иконка, зажимаем Shift, (для того чтобы иконка появилась ровная) и растягиваем до нужных размеров. И такой же процесс повторяем со следующими фигурами. В конечном итоге вот что должно получиться:
Переходим к логотипу. Опять же создаём отдельную группу для логотипа и в новый слой.
Логотип
Переходим на этот сайт и качаем шрифт. Выбираем инструмент «Горизонтальный текст». Ищем в поле со шрифтами название нашего шрифта Olivier. Кликаем на то место где будет располагаться лого и пишем название на Английском, потому что этот шрифт не поддерживает кириллицу. Вот что должно получиться:
Создаём группу «Нижнее меню» и новый слой.
Нижнее меню (Главное)
Выставляем линейки как на рисунке:
Выбираем инструмент «Прямоугольная область» и выделяем. Затем выделенную область заливаем вот этим цветом #303030. Вот что должно получиться:
Отменяем выделение во вкладке «Выделение». Теперь идём во вкладку Фильтры — Шум и выбираем Добавить шум. Потом выставляем такие значения:
Добавляем линии. Делаются они так же как и в верхнем меню только изменён сам цвет линии. Думаю, что вы справитесь, и должно получиться вот что:
Сейчас переходим к панели с информацией, которая будет говорить пользователю где он находится на сайте.
Как обычно в группе «Хидер» создаём группу «Инфо панель» с новым слоем.
Панель с информацией
Для начала добавляем полосы с линейки как на рисунке ниже:
Выбираем инструмент «Прямоугольная область» и выделяем область прям под меню, и заливаем её чёрным цветом #000000
Отменяем выделение, берём «Горизонтальный текст» изменяем размер шрифта на 48 пт и цвет #a4a4a4. Пишем «Последние Записи». Вот, что у Вас должно получиться в итоге:
Контент
Переходим к разметке середины нашего будущего сайта. Нам нужно с помощью линейки разметить где будут находиться блоки постов и блок сайтбара (Правой колонки).
Сразу же нужно создать 2 отдельных группы:
- Метки — в эту группу мы будем добавлять текст с размером наших колонок.
- Контент — группа где будет находиться вся наша середина сайта.
В группе контент создаём под группу «Левый», в которой будут находиться наши блоки с записями.
Выбираем инструмент «прямоугольная область», задаём ей стиль «заданный размер» и выставляем ширину 800рх высоту 100рх. Вот итог:
Добавляем линии с линейки как на рисунке, и отменяем выделение:
В группе «Контент» делаем под группу с названием «Правый» (Сайтбар). Будем размечать место для правой колонки сайта.
Опять берём «прямоугольная область», а вот в стиле области задаём немного меньший размер в ширину 350рх высоту оставим ту же в 100рх. И далее делаем всё как на рисунке:
Вот теперь мы точно знаем где будут блоки с записями и сайтбар. И всё будет ровно.
Помните мы создали группу метки? Там просто создайте слой с надписями размеров блоков, вот как у меня:
Эти метки очень помогут при вёрстке. Не нужно будет вспоминать размеры.
Блоки с записями
Начнём мы пожалуй с блоков с записями, делаются они в данном случае очень просто.
В группе «Левый» создаём подгруппу «блок» и новый слой.
Опять выбираем инструмент «Прямоугольная область». В стиле задаём размеры 800 х 300. Подгоняем под линии. Потом заливаем вот этим цветом #d9d9d9. Это у нас получилась миниатюра.
В той же группе добавьте метку с помощью текста как у меня на рисунке выше.
Теперь давайте добавим заголовок к записи. Берём «Горизонтальный текст» ставим размер в 35 пт и цвет чёрный. Добавляем прям под миниатюрой:
Добавляем информацию к посту. Ставим размер шрифта в 14 пт и цвет ближе к серому:
И описание к посту:
Теперь добавляем текст и смотрим, что у нас получилось:
Чтобы записи хоть не много разделить, давайте создадим простой разделитель из кругов.
Создаём группу «Разделитель», выбираем «Овальная область» создаём слой. И под блоком записей зажимая Shift рисуем круг, затем заливаем его вот этим цветом #efefef.
Отменяем выделение и ищем середину круга с помощью линейки
Выбираем слой с нашим кружком на нём же нажимаем правую кнопку мыши и выбираем «Создать дубликат слоя». Перетащите его немного влево.
В верхней панели заходи во вкладку «Редактирование» — Трансформирование и выбираем Масштабирование. И делаем круг немного меньше первого, при этом зажимая Shift чтобы круг получился ровным.
Вот что должно получиться:
Копируем слой этого маленького круга опять перемещаем его влево. Так же точно уменьшаем его размер как написано выше, чтобы получилось вот так:
Сейчас Вам нужно создать дубликат среднего круга и переместить его вправо, и тоже самое сделать с маленьким кругом. Чтобы было понятнее сделайте как на рисунке:
А вот что получилось только в нормальном размере:
Сейчас размещаем блок записей под блоком. Создаём дубликат нашей группы «Блок» На панели инструментов выбираем курсор (самый верхний). И перетаскиваем наш блок записей вниз. и так делаем раз 5.
Сайдбар (правая колонка)
Находим нашу группу «Сайдбар», и создаём в ней подгруппу «Поиск». С помощью линии делаем вот так:
Выбираем инструмент «Прямоугольная область» и выделяем поле для поиска, затем заливаем его вот этим цветом #eeeeee
Не забываем отменить выделение, кликаем на инструмент «Горизонтальный текст» и в сером поле пишем слово Поиск
Слева выбираем инструмент «Произвольная фигура» и сверху ищем фигуру лупы. Она есть в стандартных фигурах. Создаём слой в группе «Поиск» наводим на поле и рисуем нашу фигуру удерживая Shift.
Поле поиска готово. Теперь переходим к виджетам.
Создаём группу «виджет» и новый слой в ней. Затем добавляем линий как на рисунке. Это будет фон нашего заголовка, и заливаем его эти цветом #eeeeee
В наш заголовок теперь нужно добавить сам заголовок, делаем это с помощью текста. А ещё добавим иконку к заголовку. Для этого нужно выбрать любую фигуру которая по душе, и которая по смыслу подходит:) Не забываем зажимать Shift когда добавляем фигуру. И залейте её вот этим цветом #0dbfe5
И конечно же нужно добавить записи к нашим виджетам. Нужно выбрать инструмент «горизонтальный текст», затем установить размер в 16 пт. И сделать ка на рисунке ниже
Затем просто создаём дубликат группы и перетаскиваем виджет вниз. Делаем то же самое что и с постами.
Вот теперь мы можем наблюдать почти готовый и простой макет для нашего будущего сайта.
Футер (Низ сайта)
Ну как же без него. В этом шаблоне он тоже не сильно сложный.
Всё как обычно создаём группу «Футер» и слой в ней. И размечаем его с помощью линейки, выбираем наш уже любимый инструмент «прямоугольная область» выделяем его и заливаем #0dbfe5
Отменяем выделение. Берём «Горизонтальный текст» находим тот шрифт, который мы скачали (Olivier), и вписываем наш логотип, только цвет текста делаем чуть темнее.
А с правой стороны нашего футера добавляем меню такое же как сверху только без линии. Его даже можно просто скопировать и переместить вниз.
Вот и всё, друзья, у нс готовый макет, который уже можно верстать:)
Ещё, вот Вам его PSD файл. Скачивайте, и смотрите если что то не поняли.
Друзья, если Вам что нибудь будет не понятно, обязательно спрашивайте в комментариях.
До скорых встреч.
Дорогие друзья, сегодня я хочу показать вам как можно сделать дизайн сайта в фотошопе.
Урок получился очень большим и думаю будет полезным для вас.
Урок фотошоп как сделать дизайн сайта
Изучив данный урок вы научитесь самостоятельно делать дизайн сайта в psd формате, также вы научитесь работать с формами, линейкой, направляющими, изменять размер документа и многое другое.
Будем делать вот такой дизайн. У меня стоит Photoshop CS5 (английская версия, не люблю русские версии программ).
Если по какой то причине вы не хотите изучать урок и хотите просто скачать дизайн сайта в psd формате —
Если вам интересно самому/ой научиться делать такие дизайны этот урок для вас.
Для работы с дизайном нам понадобятся следующие файлы (скачать файлы одним архивом):
— фон с бабочками (для шапки сайта);
— шрифты;
— картинка c девушками;
— картинки для слайдера;
— иконки социальных сервисов;
— картинки для новостей;
— картинка рассылки;
— картинка счетчика.
Перед началом работы разделим наш дизайн на составляющие:
1. Фон и подложка для сайта;
2. Шапка сайта (состоит из логотипа и текста, тематической картинки, фона и основного навигационного меню)
3. Слайдер, в просторечье карусель;
4. Поиск по сайту;
5. Основной контент (сами новости);
6. Сайдбар — боковая колонка (блок последние новости, блок социальные сервисы, блок подписка, блок голосование)
7. Пейжер — постраничная навигация по сайту;
8. Футер — нижняя часть сайта.
Приступим к созданию нашего дизайна в фотошопе.
Настройка фотошопа
1. Открываем фотошоп и создаем новый документ File→New (Файл→Новый или CTRL+N – в скобочках вместе с переводом буду указывать сокращения – проще говоря “горячие” клавиши — если такое действие будет встречаться в уроке еще раз, я буду использовать уже только горячие клавиши, которые позволяют экономить время в программе фотошоп).
В окошке я указал следующие параметры:
2. Перед началом работы произведем некоторые настройки фотошопа:
— устанавливаем в фотошопе цвет переднего/заднего плана по умолчанию (черный/белый), для этого жмем D на клавиатуре, так же можно изменять цвета местами с помощью клавиши X (есть так же соответствующие кнопочки внизу панели с инструментами).
— поставим галочку Auto-Select (Автоматически выбрать ) и в выпадающем меню выбираю Layer (Слои ) – данная настройка позволяет выбрать любой слой по клику на нем.
— отобразим палитру History (История) идем Windows→ History — с помощью этой палитры можно отменять предыдущие действия сделанные в фотошопе (также работают горячие клавишы Ctrl+Z и Ctrl+Alt+Z .
— включаем шкалу-линейку для документа, идем Views→Rules (Вид→Линейки или CTRL+R ) должна появиться горизонтальная и вертикальная шкала-линейка.
Сразу же следует убедиться, что данные на линейке отображаются в пикселях. Для этого щелкаем дважды мышкой по самой шкале с линейкой и выбираем такие параметры:
Если вы только начинаете пользоваться фотошопом, направляющие помогут вам при создании/рисовании обектов в фотошопе.
Создание фона и подложки для сайта
3. Открываем файл с фоном File→Open (Файл→Открыть или CTRL+O , фаил fon.jpg из архива). Полностью выделяем наш документ — нажимаем CTRL+A . Делаем из нашего рисунка фон в фотошопе, идем во вкладочку Edit→ Define Patter (Правка→ Определить узор), пишем название (я написал pattern ).
4. Переходим на наш основной документ, идем Edit→Fill (Правка→ Заливка, SHIFT+F5 ), в окошке выбираем Pattern , далее выбираем иконку с нашим патерном и нажимаем OK (заливаем наш фон созданным паттерном).
5. Теперь создадим белую подложку для нашего дизайна. Создаем новый слой, идем Layer→ New→Layer (Слой→ Новый→ Слой). Даем ему любое название и жмем OK . В палитре со слоями (Windows→ Layers, Окно→ Слои, F7 ) должен появится новый слой.
Сейчас нам помогут направляющие (щелкаем по линейке и тянем мышку вправо сделаем одну направляющую, а потом вторую — на глаз делаем что бы расстояние слева и справа было примерно одинаковым).
Удобно делать выделение с направляющими (если нужен точный размер области), но можно обойтись и без них (на глаз).
После этого берем инструмент Rectangular Marque Tool (Прямоугольное выделение, M
(нажмите на картику для просмотра оригинала)
Заливаем наше выделение любым цветом берем инструмент Paint Bucket Tool (Ведро, G ) или просто жмем Alt+Backspace . После этого щелкаем по слою два раза и попадаем в стили слоя. Я выставил такие настройки для Drop Shadow (Отбрасывать тень) — цвет выбрал #5F1338 :
На этом с фоном закончим и перейдем к созданию шапки для сайта.
Делаем шапку для сайта
6. В начале создадим фон для шапки, из предложенного мною архива берем файл batterfly.jpg , открываем его в фотошопе File→Open . Теперь нужно перенести слой с картинкой в наш основной докумени. Для этого выбираем инструмент Move Tool , выбираем слои с иконкой, кликаем правой кнопкой мыши и выбираем пункт Dublicate Layer (Копия слоя).
В появившемся окошке вваодим название слою (я назвал fon-header), чуть ниже в поле Document (Документ) выбираем документ в который нужно вставить слой, у нас woman-design-blogohelp.psd и нажимаем OK .
Слой должен вставиться ровно посередине документа.
Теперь передвинем наш слой в самый верх, это можно сделать 2 способами:
Первый способ: берем инструмент Move Tool , кликаем по нашему слою с бабочками и не отпуская кнопку мыши еще нажимем клавишу Shift (что бы слой двигался равно вверх) и после этого тянем мышку вверх и в нужном месте расспологаем наш слой.
Второй способ: выбираем слой с бабочками и слой с фоном в палитре Layers (F7)
После этого в настройках элемента Move Tool , выбираем иконку Align top edges (Выравнить обекты по верхнему краю):
В итоге у нас получилось:
(нажмите на картику для просмотра оригинала)
Я специально сделал фон с бабочками больше белого фона, сейчас расскажу как удалить лишние края слева и справа. Теперь выбираем мышкой наш слой с бабочками и берем инструмент Rectangular Marque Tool (Прямоугольное выделение, M ) и рисуем прямоугольную область — выделяя наш ненужный кусок. После того как вы нарисовали область ее можно двигать клавишами Вверх, вниз, право, влево.
Далее просто нажимаем Delete и удаляем ненужную нам часть слоя. По анологии делаем с правым кусочком слоя. После этого для слоя fon-header , не снимая выделение со слоя, установим ему Opacity (Непрозрачность) в 20% .
7. Теперь сделаем небольшое затемние вверху шапки. Создаем новый слой — Shift+Ctrl+N . Даем ему любое название (у меня shadow-top ) и жмем OK .
После этого не снимая выделения со слоя shadow-top нажимаем Ctrl и не отпуская его кликаем по иконке слоя fon-header .
(нажмите на картику для просмотра оригинала)
После этого заливаем слой любым цветом — Alt+Backspace и идем в свойства слоя (кликаем два раза по слою). Снимае выделение, нажимаем Ctrl+H . Далее выбираем свойство Gradient Overlay (Заливка градиентом) и ставим такие свойства:
Теперь нужно слой с затемнением (shadow-top ) поместить ниже слоя (fon-header ). Жмем F7 , выбираем нужный нам слой, хватаем его мышкой и переносим на порядок ниже (так же можно менять порядок слоев используя клавиши Ctrl+} — опустить слой на порядок или Ctrl+{ — поднять слой на порядок).
Делаем логотип для сайта
8. Фон готов теперь давайте напишем наш текст и нарисуем логотип. Берем инструмент Horizontal Type Tool (Горизонтальный текст, T ) и щелкаем на шапке в том месте, в котором планируем написать надпись — у меня это WomanSite.ru , и пишем ее. Настройки для надписи я задал такие:
Если у вас на компьютере нет такого шрифта, то его можно взять из моего архива.
C помощью инструмента Move Tool (V), расположил текст в нужном мне месте.
Точно так же поступим и с текстом «Site.ru», только цвет поставим #797878 .
Сделаем обводку и тень нашему тексту. Кликаем два раза по слою и ставим галочки напротив Drop Shadow и Stroke (Обводка).
На этом с текстом все, переходим к логотипу.
9. Я хочу познакомить вас с основами рисования логотипов в фотошопе. Будем делать вот такой логотипчик (логотип сделан в виде завитушек, всего их 7 штук), на основе моего, который можно взять в заготовленном мною архиве.
Открываем в фотошопе файл logo.jpg , переносим картинку логотипа в основной документ и расплагаем рядом с текстом.
Слою с логотипом задаем Opacity (Непрозрачность) — 25% и отключаем видимость некоторых слоев — что бы не мешали (убираем иконку глазика напротив слоя в палитре Layers, F7 )
Логотип будем рисовать (можно сказать отрисовывать) с помощью путей, они, так же называют векторными элементами или векторное включение в растровую картинку (кому интересно, подробнее про пути можно почитать ).
Кроме палитры Layers (F7), нам так же понадобится палитра Path (Пути). Что бы ее отобразить идем WIndows→Path (Окна→ Пути).
Берем инструмент Pen Tools (Перышко, P ) , поставим ему такие настройки:
после этого начинаем рисовать первую завитушку — один раз кликаем мышкой в нужном нам месте и получаем первый узелок нашего будущего пути или контура:
По аналогии делаем остальные 6 завитушек.
На этом создание логотипа закончено. С помощью стилей слоев закрасим каждую завитушку градиентом. Кликаем по нужному слою два раза и в настройках слоя Gradient Overlay (Градиентная заливка) заливаем его нужным нам градиентом.
В итоге у меня получилось.
После этого обьеденим все слои с нашими путями, выделяем все слои в палитре Layers и обьеденяем, нажимаем Ctrl+E .
Для полученного слоя применим эффекты с текстового слоя. Выбираем слой с текстом, кликаем правой кнопкой мыши и в открывшемся списке выбираем Copy Layer Style . Выбираем слой с нашим логотипом и вставляет эффекты, правой кнопкой и в меню выбираем Past Layer Style .
10. Теперь сделаем горизонтально тектовое меню. Нам понадобиться инструмент Raunded Rectangle Tool ()
(нажмите на картику для просмотра оригинала)
Теперь поверх напишем наш текст, все тем же инструментом Horizontal Type Tool #FFFFFF . Выставил такие настройки:
В итоге получилось.
(нажмите на картику для просмотра оригинала)
Теперь вставим нашу тематическу картинку, открываем файл ladies.png , копируем слой с нашей картинкой в основной документ и в палитре Layers переносим слой с картинкой ниже нашего меню. В итоге у меня получилась, вот такая симпатичная шапка для нашего сайта.
(нажмите на картику для просмотра оригинала)
Делаем слайдер для сайта
11. Теперь давайте сделаем дизайн слайдера для сайта. Создаем новый слой Ctrl+Shift+N . С помощью напрвляющих определим место под слайдер. Далее берем инструмент Rectangular Marque Tool (Прямоугольное выделение, M ) и рисуем прямоугольную область.
(нажмите на картику для просмотра оригинала)
Заливаем ее любым цветом, после этого применим к этому слою градиентную заливку:
Напишем поверх текст «Лучшее на сайте».
12. Далее рисуем фон для нашего слайдера так же инструментом Rectangular Marque Tool (Прямоугольное выделение, M ) и рисуем прямоугольную область. Создаем новый слой Ctrl+Shift+N и заливаем любым цветом (у меня #FFD9DE ).
13. Фон сделали, теперь сделаем подложку поверх фона, для этого уменьшим нашу выделенную область на 4 пикселя, идем Select — Modify — Contact (Выделить-Изменить-Уменьшить).
Создаем новый слой Ctrl+Shift+N и заливаем ее белым цветом — #FFFFFF .
Снимаем наше выделение, нажимаем Ctrl+H. Слева у нас будет большая тематическая картинка с описанием, а справа будет 4 маленьких картинки с описанием.
Картинки можно трансформировать с помощью команды Edit-Free Transform Ctrl+T )
Картинки я подготовил (файлы slider-base-picture.jpg, slider-picture1.jpg, slider-picture2.jpg, slider-picture3.jpg, slider-picture4.jpg ), открываем их в фотошопе и переносим в наш основной документ. Распологаем как нам нужно, у меня получилось.
14. Создаем подложку для основной картинки — создаем новый слой Ctrl+Shift+N , рисуеv пряямоугольное выделение и заливаем его цветом #e15c6c . Для этого слоя поставим Opacity (Непрозрачность), поставим в 90%.
Поверх нее пишем наш текст.
После этого рядом с 4 картинками тоже напишем нужный текст.
На этом со слайдером все, переходим к следующему пункту — Поиск по сайту.
Делаем дизайн блока поиск по сайту
15. Создаем новый слой Ctrl+Shift+N . Чуть ниже слайдера рисуем прямоугольную область и заливаем #ccf8aa .
16. Поверх пишем наш текст «Поиск по сайту:», далее берем инструмент Raunded Rectangle Tool (), угол скругления ставим 5 пикслей и рисуем форму поиска. Поверх формы пишем текст «Введите слово или словосочетание…», после этого делаем кнопку для поиска.
Так же инструментом Raunded Rectangle Tool () рисуем нашу кнопку и поверх наш текст «Найти».
В итоге у меня получилось.
Делаем оформление блока с новостями
17. Теперь переходим к рисованию самих новостей на сайте. Фон блока будем делать с помощью путей. Берем инструмент Rectangle Tool и рисуем прямоугольную область. Эту область можно трансформировать с помощью команды Edit-Free Transform (Правка — Свободная Трансформация, Ctrl+T ).
Теперь поверх напишем текст — загголовок для первой новости, все тем же инструментом Horizontal Type Tool (Горизонтальный текст), я выбрал белый цвет #b14757 . Выставил такие настройки:
18. Далее открываем ранее заготовленные мною картинки для новостей (файлы news-picture1.jpg, news-picture2.jpg, news-picture3.jpg, news-picture4.jpg, news-picture5.jpg ). Берем первую и распологаем снизу под заголовком.
19. После этого пишем текст справа от картинки. Все тем же инструментом Horizontal Type Tool
(Горизонтальный текст), я выбрал черный цвет #000000
. Только теперь мы не просто кликаем инструментом, а кликаем и не отпуская мыши тянем вправо.
20. Чуть ниже сделаем разделительную полоску. Полоска будет выполнена в виде пунктирной линии размером в 1 пиксель. Создаем новый слой Shift+Ctrl+N . Берем инструмент Pencil Tool (Карандаш). Цвет для рисования я выбрал: #c8c8c8 . Теперь давайте настроим наш карандашь, жмем F5 и ставим вот такие настройки:
И после этого рисуем нашу разделительную линию (с нажатой клавишей Shift ).
21. После этого по аналогии делаем наши остальные 4 новости.
Делаем оформление пейжера
22. Теперь давайте сделаем Пейжер — постраничнyю навигацию по сайту. Берем инструмент Rectangle Tool и рисуем прямоугольную форму. Что бы форма получалась квадратной, рисуем ее вместе с нажатой клавишей Shift . Так же форму можно трансформировать с помощью команды Edit-Free Transform (Правка — Свободная Трансформация, Ctrl+T ).
После этого напишем наш текст.
Делаем сайдбар
23. Нам осталось сделать Сайдбар (оформление боковой колонки сайта) и Футер (оформления низа сайта).
Начинаем рисовать первый блок «Популярное на сайте», берем инструмент Rectangle Tool и рисуем прямоугольную форму.
Для этого слоя применим эффекты Color Overlay (Заливка фоном) и Stroke (Обводка).
24. Сделаем шапку для блока, берем инструмент Rectangular Marque Tool (Прямоугольное выделение, M ) и рисуем прямоугольную область. Далее уменьшим нашу выделенную область на 1 пиксель, идем Select — Modify — Contact (Выделить-Изменить-Уменьшить). И в окошке поставим единичку и жмем ОК.
Создаем новый слой Ctrl+Shift+N и заливаем любым цветом.
Для слоя с фоном блока применим эффект Color Overlay (заливка цветом) цветом и Stroke (обводка) цветом #FFC486 .
25. Пишем текст наших популярных новостей.
Рядом с каждой новостью сделаем иконочку-маркер, откроем мой заготовленный файл marker.png название_файла.jpg, копируем слой с маркером в наш основной документ и инструментом Move Tool распологаем наш маркер рядом с названием новости, далее копируем (Ctrl+J ) этот слой 4 раза и распологаем в нужных нам местах.
26. Перейдем к следующему блоку с социальными кнопками. Блок делается по аналогии с предыдущим, только для шапки блога используем такой градиент. Текст пишем «Присоединяйтесь к нам в:».
а для фона такие эффекты: заливка белым цветом и обводка цветом #95d9ee .
Иконки берем из моего приготовленного архива: twitter.png, facebook.png, vkontakte.pn g.
Вставляем иконки в наш документ и распологаем в нашем блоке. Ниже делаем текст для социалок.
27. Далее рисуем блок подписки. Делаем фон для блока, делаем шапку блоку, пишем текст, картинку берем из архива название картинки subscribe.jpg , делаем форму подписки и кнопочку «Подписаться» (форму мы уже делали когдарисовали блок Поиск по сайту) и распологаем как на рисунке.
На этом с блоками все, перейдем к созданию нижней части сайта — Футеру.
Рисуем футер для сайта
29. Создаем новый слой. В самом низу сайта рисуем прямоугольное выделение инструментом Rectangular Marque Tool (Прямоугольное выделение, M ), заливаем его любым цветом. Далее делаем этому слою градиентную заливку.
После этого сделаем разделительную полоску (между футером и пейжером). Ее тоже зальем градиентной заливкой.
(нажмите на картику для просмотра оригинала)
Получилось вот так.
(нажмите на картику для просмотра оригинала)
31. Чуть ниже сделаем полоску разделитель. Приблизим место под текстовым меню с помощью лупы. Создаем новый слой, берем инструмент Pencil Tool (Карандаш). Кисть ставим в 1 пиксель, цвет берем #f2cbcf и рисуем линию. Сразу под ней рисуем еще одну линию цветом #ffe4e6 .
(нажмите на картику для просмотра оригинала)
В итоге у меня получилось
(нажмите на картику для просмотра оригинала)
Ниже текстового меню расположим счетчик (картинку можно взять из архива — файл counter.jpg ) и чуть правее напишем наш копирайт.
(нажмите на картику для просмотра оригинала)
На этом все, как сумел расскрыл вопрос — .
(нажмите на картику для просмотра оригинала)
Если у вас есть вопросы, задавайте их в комментариях, с радостью на них отвечу.
Давайте вместе изучать этот интересный и загадочный мир программы Adobe Photoshop.
Уникальность дизайна является крайне желательным, но вовсе не обязательным условием для достижения высокой посещаемости ресурса. Большинство посетителей визиток, блогов или магазинов разбираются в дизайне на уровне «ух ты!» или «нормально…». И в этом нет ничего плохого.
Конечно, если человек видит нечто совсем уж выходящее за рамки в лучшую или худшую сторону, тогда набор среднестатистических реакций расширяется. Но, зачастую, смелые эксперименты позволяет себе не такое уж и большое количество разработчиков. Точнее, только те, кому это реально нужно или же те, кто просто может технически реализовать неординарный подход. И желает показать это остальным.
Всё-таки мы привыкли к стереотипам в восприятии тех или иных типов сайтов. Шапка, слайдер, контакты, подвал. Светлый фон, синие, коричневые или зелёные элементы. Тёмный фон, большие картинки, белый шрифт. Ну и так далее. Многие сайты в плане цветовой гаммы и расположения блоков похожи друг на друга. Это и неудивительно.
Просто взгляните на сайт Википедии. Минимум дизайна. Максимум функциональности.
И это прекрасно!
Существуют тренды, которые не так уж и быстро меняются. Конечно, если вы – дизайнер, то от вашего сайта посетители будут ожидать вау-эффекта. Стильного минимализма, эксцентричности, уникальной структуры и графики или ещё чего-то такого, что сможет хотя бы немного выделить проект в визуальном плане на фоне большинства.
Но человек, желающий создать визитку своими руками первый раз в жизни, обычно таких задач не ставит. Достаточно, чтобы было не хуже, нежели в среднем у конкурентов. Если же лучше – вообще отлично! Главное – удобство навигации, приятное общее впечатление и отсутствие лишних, бесполезных элементов, заглушающих своим шумом действительно важную информацию.
Дизайн не должен служить самоцелью. Большое количество цветов, скопления сложных элементов обычно не делают из сайта вещь, которой удобно пользоваться. Дизайн должен помогать эффективно позиционировать информацию, которая представлена на сайте. Не мешать, а помогать её лёгкому усвоению.
Не нужно впихивать невпихуемое. Иногда приходит пора остановиться.
Дизайн – это не только внешний вид сайта, но и структура: расположение блоков, меню, вложенности страниц. То есть он напрямую связан с юзабилити. Не существует общего рецепта дизайна, который одинаково хорошо подошёл бы под любой проект. В каждом конкретном случае нужно анализировать конкурентов, потенциальную аудиторию сайта, продукт и прочее.
Например, исследования показывают, что люди среднего и зрелого возраста лучше воспринимают сайты в светлых тонах. Такой подход создаёт ощущение пространства, воздушности. Легче читать и выделять главные элементы на странице. Подросткам же не меньше нравятся сайты с тёмным фоном и выразительной графикой. Это просто примеры статистики, не аксиомы.
Нужен ли вообще уникальный дизайн?
Сразу отметим, что мы говорим об интерьере ресурсов, созданных при помощи конструкторйов сайтов. Так проще или сложнее получить уникальный дизайн с их помощью по сравнению с теми же CMS? И да, и нет. Зависит от выбранной платформы.
Не секрет, что в любом сайтбилдере содержится набор встроенных шаблонов. Плюс в том, что так вы сходу получаете примеры дизайнов, нарисованных компетентными людьми. Но, конечно, использовать их один в один без внесения малейших изменений не всегда хорошо. Да, достаточно заполнить демо-данные в понравившемся шаблоне своими, и вы получите почти готовый сайт. Но без уникального дизайна.
Мы даём вам готовый шаблон, а вы даже не меняете на нём стандартные фотографии. Не надо так.
Впрочем, мало кто догадается об этом. Каждая система содержит свой набор шаблонов, которых тысячи. Вряд ли посетитель поймёт или даже подумает, что дизайн вашего сайта взят с заготовки. Для критического отношения необходимо обладать опытом: самому делать сайты или хотя бы быть в курсе новостей из сферы. Поэтому в большинстве случаев вас даже не подумают уличить в шаблонном дизайне. Следовательно, на репутации ресурса это никак не скажется. В принципе, никому не важно, как и на чём создан ваш сайт. Главное – хорошее наполнение и польза для посетителя.
Уникальный дизайн можно делать по желанию и возможности. А можно и не делать. Ведь в любом случае вы станете использовать свои картинки и тексты. Без этого никуда, и в большинстве случаев этого окажется достаточно. Если же нет, то есть способы кардинально выделиться на фоне конкурентов.
Способы придания шаблону уникальности
Инструментарий для изменения готовых дизайнов в различных сайтбилдерах варьируется. Конечно, общие точки пересечения есть: как минимум, это возможности изменения фона и штатных картинок. Полагаем, вас столь общая информация мало устроит, поэтому мы детально опишем особенности нашего продукта в этом плане – конструктора сайтов А5.
Естественно, мы рекомендуем использовать уникальную графику: изображения, логотип, иконки и прочее. Это, так сказать, джентльменский набор хорошего сайта. Также не лишним станет и правка шрифтов по умолчанию. В А5 можно выбрать любые Google-шрифты. Главное – не переборщите с их количеством. 2-3 достаточно, не больше. Всё должно быть легко читаемо и вписываться в общую концепцию дизайна.
«Самый худший в мире сайт из когда-либо созданных» уступает некоторым шедеврам, которые умудряются слепить наши пользователи даже из готовых красивых шаблонов.
Вы сможете настроить дизайн базово, подкорректировав расположение блоков с виджетами как вам понравится, изменив их размер и заменив, к примеру, штатные изображения/текст.
Имеются также более глубокие настройки внешнего вида каждого из виджетов. Например, вы можете выбрать:
- тип меню (вертикальное/горизонтальное)
- стиль меню
- фон или цвет пунктов
- шрифт
- размер в обычном состоянии и при наведении курсора и прочее.
В настройках галереи можно выбрать эффекты скроллинга изображений, тип (миниатюры или слайдер), автоматическую подгонку картинок, показ/скрытие стрелок навигации и задать действие по клику мыши.
Работая с кнопкой, можно выбрать для неё фон или цвет, шрифт, границу, задать степень размытия и скругления углов, а также поведение элемента при наведении.
Какой бы вы элемент ни выбрали, ему можно придать уникальный вид. В компоновке страниц наши пользователи вообще ничем не ограничены. Можете тестировать на своём сайте любые дизайнерские тренды.
Если же нет времени или желания на проведение экспериментов, просто доверьтесь готовым шаблонам, нарисованным профессиональными дизайнерами. Замените демо-данные на свои и публикуйте сайт. Этого в большинстве случаев окажется достаточно для выполнения основной задачи – продаж, привлечения клиентов, сбора подписок и т. д.
Выводы
Хороший сайт должен обладать не только удачным, но и, желательно уникальным дизайном. Если вы хотите, чтобы вас узнавали, планируете строить репутацию бренда, то используйте фирменные цвета, символику и графику. Дизайн не обязательно должен быть сложным технически. В идеале он обязан помогать фокусировать внимание пользователя на контенте.
Сайт – не выставка, дизайн – не основной продвигаемый на нём товар, если только вы сами не дизайнер или иного рода творческая личность. Тогда да, придётся постараться, чтобы продемонстрировать полёт фантазии и свои навыки посетителю с первых секунд его знакомства с ресурсом.
В А5 очень много возможностей по изменению стандартного вида шаблонов. Вы сможете получить именно такой результат, который хотите. Система искусственно практически никак не ограничивает полёт фантазии. Но тут важно наличие вкуса. Люди, не склонные к делам творческим, могут потратить время, так и не получив желаемого.
Для визиток, магазинов и блогов вполне достаточно в меру уникального шаблона. Свои цвета, шрифты, логотипы, картинки – всё, большего и не требуется. Если только вы сами не пожелаете чего-то экстраординарного.
Пользователи Интернета избалованы обилием предложений. Чего они только не видели. Поверьте, удивить большинство из них сложно. Поэтому уникальность не обязательно должна сопровождаться чем-то невероятным. Достаточно чтобы дизайн был просто на уровне. Лучше потратьте основную часть времени и сил на качество контента и его подачу. Это станет более эффективным вложением ресурсов.
Если вы затеяли ремонт, то первым шагом на пути к интерьеру мечты будет составление дизайн проекта.
Как создать дизайн проект самостоятельно? Что вобще это такое и зачем он нужен? Что нужно знать новичку, чтобы сделать проект с нуля? Давайте разберёмся по порядку.
Что такое дизайн проект?
Если говорить кратко, то дизайн-проект — это ваша идея и задумка будущего помещения, которая нашла своё отражение на бумаге.
Зачем нужен дизайн-проект?
В первую очередь
дизайн проект нужен для того, чтобы ваши ожидания не расходились с реальностью. Согласитесь, вложив приличные деньги в ремонт, хочется получить не только красивый и стильный интерьер, но и удобное, функциональное пространство.
Во-вторых , это существенная экономия денег. Вы сможете увидеть свой интерьер, оценить его и внести поправки ДО того, как изменить что-либо уже невозможно.
В свою очередь это вклад в своё будущее настроение и получение удовольствия от пребывания в гармонично обставленной и удобной квартире.
А теперь поговорим о том, чем пользуется профессиональный дизайнер, и чего из этого перечня будет достаточно вам.
Что входит в дизайн-проект?
Если говорить конкретно, то это пакет документов, куда входят: чертежи, схемы, эскизы, фотореалистичные изображения. Вот список документов профессионального дизайнера:
- Это «голый» план помещения в масштабе (вид сверху), тот, который есть до проведения ремонтных работ.
- Планировочное решение.
Это план будущего помещения с мебелью, техникой и прочей атрибутикой. Таких планировочных решений в начале может быть несколько. Если дизайнер делает перепланировку
, то добавляются ещё 2 плана: план монтажа
/демонтажа перегородок и экспликация
.
- Схемы расположения розеток и осветительных приборов
(иногда это могут быть 2 отдельных чертежа).
- Нужен для того, чтобы указать зоны разных типов напольных покрытий.
- Особенно необходим план потолка в случае многоуровневых конструкций; тип материала также указывается.
- На этом плане отмечается всё: мебель, освещение, розетки, декор — всё. По сути это выглядит как планировочное решение, только «в профиль».
- Технические схемы (вентиляция, отопление)
- (спецификация материалов и оборудования)
- Коллаж
или дизайн-борд
. Может выглядеть вот так:
- Эскиз/визуализация в 3D программе. Кстати, создать 3D визуализацию не так уж сложно, если знаете, какие использовать новичку. ;-)
Как видно из списка, составить полностью такой объём документов для начинающего, мягко говоря, сложновато.
Что достаточно освоить новичку?Минимальные затраты
Как дизайнер, я могу сказать, что если вы , то достаточно составить:
- Обмерочный чертёж (пункт №1 из предыдущего списка)
- Планировочное решение (№2)
- Развёртку стен (№6)
- Дизайн-борд (№9)
Самая сложная задача
— это продумать размещение розеток. Поскольку развертка стен во многом повторяет план розеток и эскиз (хотя и не рисуется в объёме), то его вполне достаточно, чтобы увидеть будущий интерьер. План потолков же необходим лишь в случае многоуровневых конструкций и рисуется довольно легко.
Как создать дизайн проект? 4 этапа.
Теперь, когда вы знаете, какие чертежи необходимы, нужно понять, с какой стороны подступить к составлению своего проекта.
1. Продумывание функциональности и удобства помещения.
С этого мы должны начинать всегда, поскольку в удобном интерьере всегда можно создать красоту, а вот сделать красивый интерьер удобным можно далеко не всегда.
Вопросы, которые вам помогут:
- Каково назначение каждой комнаты? Какие задачи она должна выполнять?
- Как я могу зонировать помещение , чтобы эти функции выполнялись?
- Сколько у меня вещей, какое количество места они занимают сейчас? И какое количество шкафов/тумбочек/ящиков мне необходимо, чтобы всё уместилось?
2. Создаём планировочное решение.
Если вы проработали предыдущий этап, то создать планировочное решение уже не так сложно. Однако, и здесь есть простые советы для начинающих:
- Сначала начертите план помещения в масштабе (можно от руки, можно с помощью ). Никаких погрешностей и округлений быть не должно! Неточности в замерах и на плане могут привести к неприятным последствиям...
- Далее, чтобы сэкономить время, на отдельном листе (лучше взять бумагу другого цвета) нарисуйте мебель, все необходимые элементы интерьера и вырежьте их. Помните про масштаб! Это нужно для того, чтобы покрутить на плане и понять, что и где будет располагаться. Если же вы рисуете в программе, то там в один клик можно перетащить предмет из одной области в другую.
- После того, как определитесь с точной планировкой, нарисуйте ё на вашем плане помещения (или наклейте элементы мебели).
3. Составление концепции.
Рассказать словами, что это такое невозможно, однако можно показать. Вам поможет мой видеоролик « ».
4. Составление коллажа/дизайн-борда.
О том, я очень подробно рассказала в . Составление коллажа — лучшее решение для тех, кто решил сделать дизайн проект квартиры самостоятельно. Это способ наглядно увидеть, сочетание всех элементов и исправить, если что-то пошло не так.
Начертить развёртку стен тоже не помешает, особенно это актуально для рабочих. И не забудьте о расположении розеток! Чтобы они не оказались потом за диваном или за шкафом в зоне недосягаемости;-)
P.S. Помните, что всё это вы можете сделать самостоятельно с помощью курса « » и технической поддержки .
Ваш интернет-дизайнер,
Евгения Купцова
