Как сделать дизайн сайта. Шаг первый
Продолжаем разговаривать про то, как сделать дизайн сайта и сегодня речь пойдет о первых шагах, с которых вы всегда должны начинать рисовать макет. Все будет очень просто, поэтому, я думаю, каждый в состоянии приукрасить свои сайты. Надеюсь, вы уже прочитали статью про то, как настроить фотошоп, что бы у вас не было проблем с перегрузкой ПК.
И так, все готово и настроено, давайте уже приступим…
Карандаш и бумага
Создание дизайна ВСЕГДА начинается с карандаша и бумаги. Вы должны это уяснить и применять на практике повсеместно… Первое время, я тоже рисовал сразу в фотошопе, но таким образом, я тратил НАМНОГО БОЛЬШЕ ВРЕМЕНИ.
Вы сами посудите, что легче: из головы рисовать макет сразу в фотошопе, особенно если вы им не особо хорошо владеете, или просто перерисовать то, что у вас находится перед глазами. Я думаю, ответ очевиден.
И совсем не обязательно уметь хорошо рисовать – я например не умею (и вы в этом скоро убедитесь, ггг), но эскиз будущего сайта, здорово помогает мне получить качественный результат. И так. Для работы нам понадобится лист формата А4, я купил специальные листы, не глянцевые, с шероховатой поверхностью, а так же ластик и карандаш.
Зарисовываем все, что придет в голову. Я, например, рисую макет сайта двумя разными способами: либо сразу целиком, то есть, начиная с шапки и заканчивая футером, это когда уже готовая идея вертится в голове, либо зарисовываю идеи, а потом рисую полностью эскиз.
В предыдущей статье про то, как создать дизайн сайта в фотошопе, я показывал макет, который мы будем рисовать.… Вот эскиз этого макета.
Фееричное УГ не правда ли? Но на самом деле этот эскиз мне очень помог.
- Во-первых, я всегда помнил, на чем остановился и что мне предстоит еще сделать
- Во-вторых, я мог более детально обдумать саму концепцию макета
- В-третьих эскиз не позволял мне забыть основную идею макета
Вообще, если честно, на бумаге не надо прорисовывать весь дизайн. Достаточно схематично показать где, что и как должно располагаться… Так что сильно с эскизами не заморачивайтесь — особенно если на это нет времени…
Делаем разметку
И так. Эскиз у нас готов, теперь самое время поговорить о том, как сделать дизайн сайта уже непосредственно в фотошопе. Скачайте архив с дополнительными материалами. В нем есть файл pattern.tif. Откройте его в фотошопе. Перейдите во вкладку Edit > Define Pattern и в появившемся окне введите любое имя для вашего паттерна, например BG fon.
Отлично. Теперь создайте документ 1024×1610 px белого цвета. Это будет наше рабочее поле. На это поле нам надо наложить паттерн, созданный ранее, который будет играть роль фона. Снимите замок с основного слоя, два раза кликнув по нему левой клавишей мыши и нажав ОК в появившемся окне. Измените имя слоя на BG fon (для этого кликните на его имени 2 раза левой клавишей мыши).
Откройте параметры слоя (для этого кликните правой кнопкой мыши на слое и выберите пункт Blending options), перейдя по вкладку Pattern Overlay, установите следующие параметры и нажмите ОК:
Не забудьте в выпадающем списке выбрать созданный ранее паттерн.
Поверх слоя BG fon, создайте два корректирующих слоя, нажав на кнопку create new fill or adjustment layer.
Параметры слоя Curves:
Параметры слоя Color Balance:
Создание дизайна сайта постепенно набирает обороты. Теперь давайте сделаем подложку под сам сайт. Создайте новый документ размером 960 х 1490 px белого цвета.
Выделите весь документ при помощи rectangular tool (или нажмите ctrl + A), затем перейдите в edit > copy (или нажмите ctrl + C). Перейдите обратно в документ с макетом и вставьте скопированный ранее документ (edit > Paste или ctrl + V).
Перейдя в настройки слоя (Blending options) установите следующие параметры:
Пожалуй, на сегодня все. Вот что у вас должно было получиться в результате всех манипуляций.
Кликните, чтобы посмотреть в масштабе
Если у вас появились вопросы про то, как сделать дизайна сайта, задавайте в комментариях – не один не оставлю без внимания.
Не забудьте скачать дополнительные материалы. Пароль на архив onjee.ru
Автор ТОха
Комментарии: 34
15.08.2011
21:15
Нравится твой стиль, буду следить
15.08.2011
21:16
Здорово будет, если ты потом еще расскажешь как сконвертировать дизайн в тему ворпресса;)
15.08.2011
21:42
@adiodas: Добрый вечер… Спасибо за комментарий… Рассказать как сделать из дизайна шаблон для wp я могу максимум на основе заготовки — тоесть на основе каркаса, состоящего из php кода (пример мой дизайн)…
В PHP я не шарю к сожалению….
15.08.2011
22:45
@onjee:Я думаю что такая информация оказалась бы хорошим продолжением, да и вообще востребованной. По крайней мере для таких как я:)
15.08.2011
22:53
а можно несколько таких фонов? чтобы не вышел у всех одинаковый. Кстати, я подписан а не вижу где качать?
15.08.2011
23:11
@adiodas: Я подумаю над этим
Спасибо за идею…
@Даниил: Да да, я совсем забыл про архив с дополнительными материалами, спасибо что напомнили… Фон можете найти сами, запрос примерно такой — бесконечные текстуры для сайта, фон для сайта ну и тд…
16.08.2011
00:19
тож пробовал начинать с бумаги, но как-то не прижилось…встречался специальный софт заменяющий бумагу, им активно пользуются на MAC’ах. Но есть версия под Винду. намного удобнее чем рисовать каракули на бумаге. Вот название блин забыл этой проги….
16.08.2011
03:34
Про шаблоны к php. =)
Берутся спецальные темы болванки типа wp-blanktheme.
Прикрутить шаблон к теме пхп, день наверное.
Просто загоните html + набор изображенией в один html, а дальше его можно прикрутить к любой CMS, самописке.
@onjee А такой большой фон не варварство?
16.08.2011
03:39
А да http://webdesign.tutsplus.com/tutorials/basics-create-a-clean-magazine-blog-theme-day-1-design/ ускорено видео создание сайта за 5 дней.
Он для первого шага, угарный инструмент пользует.
16.08.2011
09:26
@rubas: нууу если у тебя есть планшет — можно прямо в фотошопе рисовать и не заморачиваться… Дело не в этом же… Люди с детства карандашами рисуют, поэтому — так проще…
@gunlinux: я про болванку и говорил. На счет дня не уверен — это кому как… Чтобы загнать все в один html - нужно время и опыт — если конечно валидация играет роль…
А про какой такой большой фон вы говорите? Там картинка для фона маленькая, она размножается просто. background-repeat: repeat;
16.08.2011
17:29
Я лично всегда обращаю внимание на дизайн сайта — если он не слишком, я сразу могу уйти с такого ресурса
16.08.2011
17:50
@onjee
Чой то я спросонья недопрочел =)
Пардон.
Про время, если сам и верстаешь, то заранее врядли будешь использовать дьявольски сложно верстаемые элементы.
16.08.2011
18:52
@Иван: Да, я тоже… Но опять же, это не должно играть определяющую роль… Не всегда у хорошего блога хороший дизайн, хотя, конечно, если блог хороший а дизайн плохой — автор, либо жмот, либо им овладела безвкусица….
@gunlinux: Бывает…. Я когда делаю дизайн, сразу думаю, как это будет кодироваться… Но иногда этим пренебрегаю — красота, порой, дороже потраченных усилий…
17.08.2011
09:48
Это хорошо, когда руки в плане дизайна растут из правильного место. А если как у меня… то и получается то, что получается. Потому подумал-подумал — и решил попросить нормального дизайнера нарисовать мне шаблон.
17.08.2011
09:54
@ZeroXor: Спорный вопрос, на счет рук… У меня раньше тоже не особо круто получалось, но большое количество практики исправило положение, вроде бы…
Научиться веб дизайну — это дело времени и желания. И я уверен, что абсолютно любой может делать дизайн для сайтов — если захочет…
19.08.2011
14:18
в фотошопе столько всяких мелочей и настроек, что запутаться можно. но если руки растут оттуда, откуда надо, с фотошопом можно творить чудеса, что и показал этот урок
19.08.2011
16:35
@sidash: Поверь мне — руки всегда растут от куда надо — , когда ты уделяешь достаточно времени тому, чего хочешь добиться… Ты же умеешь продвигать сайты? Научился? Так же и фотошоп… Просто большинство говорят — вот я бы сделал если бы научился но это сложно а так бы полюбому….
19.08.2011
16:43
@Тяп-ляп:совершенно верно. а чтобы уделять этому больше времени должно быть желание, стремление!
19.08.2011
17:28
@sidash: да, об этом собственно и идет разговор…
22.08.2011
14:51
Хороший у вас блог. В отличие от вас, у меня с Фотошопом пока не сложилось, потому тренируюсь создавать темы в Artesteer. Если есть заготовки фонов, иконок и т.д., при помощи этой программы можно сделать не плохую тему.
22.08.2011
17:40
@БЛОGГЕР: ага, а вы код этой темы видели?
25.08.2011
13:20
Прочитав данную статью прям желание поменять дизайн возникло,что ж,будем ждать новый урок,спасибо.
25.08.2011
16:59
@TriLL: ) Радует — что еще не все на Руси seoшниками стали…
29.08.2011
19:13
Согласна, эскиз на бумаге помогает воспроизвести все задумки касательно дизайна сайта уже непосредственно в фотошопе. У меня тоже есть такие листочки с зарисовками
31.08.2011
22:21
@Тяп-ляп: мысли о том чтобы стать СЕОшником были и в моей голове. но не срослось.
зы. мой блог снова в строю)
11.09.2011
17:25
Прекрасный урок, хотя для меня было более интересен сам процесс задумки проекта до его реализации в фотошопе.
13.09.2011
09:20
@Надюша: ну они у всех дизайнеров есть, я думаю.
@rubas: твой блог с перебоями работает…. Или это только для меня?
@Мистер Томас: нууу… Наверное, я не смогу научить вас мыслить
. У каждого проекта — свой неповторимый дизайн и своя индивидуальная идея. И у каждого дизайнера, на один и тот же проект, будет свой индивидуальный взгляд… Поэтому, весь процесс задумки сводится к банальной фантазии и изучении тематики будущего сайта.
13.09.2011
20:54
да это потому что хостинг бесплатный) поэтому так тупит
13.09.2011
23:19
@rubas хочешь займу пару баксов? Купишь нормальный…
14.09.2011
12:03
в этом нет нужды) не занимал денег уже лет 5-6 точно. считаю это лишним. но всё равно спасибо))
14.09.2011
12:37
@rubas: это был сарказм….
14.09.2011
13:09
@Тяп-ляп: ну я чёта сразу и не врубился))) надо прекращать не спать по 2-е суток, а то чёта втупляю))
14.09.2011
13:27
@rubas: c 12 до 3 ночи через глаза человека проходят витамины и полезные элементы, которые положительно влияют на здоровье организма — поэтому спать надо….
04.10.2011
11:45
отличный урок! Уже давно задумываюсь сменить дизайн своего блога, а после прочтения этой статьи желание только усилилось!
Продолжай в том же духе!