Совет 1: Как нарисовать дизайн сайта

По одежке встречают не только людей, но и сайты. Одежкой сайта является его дизайн. Качественный и привлекательный дизайн ресурса производит благоприятное впечатление на пользователей, обеспечивая тем самым их лояльность и готовность уделить свое время дальнейшему просмотру. Кроме качества важна оригинальность и уникальность дизайна. Изъезженные темы отталкивают посетителей. Но разработка уникального дизайна стоит дорого. Именно поэтому многие начинающие web-мастера задаются вопросом о том, как нарисовать дизайн сайта собственными руками.
Вам понадобится
  • - карандаш;
  • - лист бумаги;
  • - редактор растровой графики GIMP или Photoshop;
  • - опционально: редактор векторной графики (например, CorelDraw);
  • - опционально: среда 3D-моделирования (3DStudio, Blender);
  • - современный браузер;
  • - доступ в интернет.
Инструкция
1
Разработайте концепцию дизайна сайта. Определитесь со стилем, цветовой схемой, компоновкой страниц (размером шапки сайта, расположением меню, блоков текста, изображений). Хорошо, если в основе концепции дизайна будут лежать оригинальные идеи. Но при их недостатке можно черпать вдохновение в ходе анализа уже существующих решений. Например, просматривая каталоги тем оформления популярных CMS. Результатом работы может стать эскиз страницы сайта, выполненный карандашом на листе бумаги с указанием зон фиксированных и варьирующихся размеров.
2
Создайте заготовку шаблона страницы сайта в редакторе растровой графики. В графическом редакторе откройте новый документ. Размеры документа должны быть гораздо больше минимальных размеров страницы как по горизонтали (даже если не предполагается создавать "резиновый" дизайн), так и по вертикали. Добавьте новый прозрачный слой. В добавленном слое линиями толщиной в 1 пиксель вычертите изображение шаблона страницы с соблюдением реальных размеров элементов. Для дизайна страниц фиксированной ширины обозначьте краевые области, которые будут заполнены цветом фона.
3
Загрузите из интернета или разработайте самостоятельно элементы дизайна страниц. Логотип и уникальные элементы дизайна могут быть созданы в среде 3D-моделирования, векторном или растровом редакторе. Тематические изображения высокого разрешения в большом количестве содержатся в бесплатных интернет-фотобанках. Существуют в интернете и бесплатные коллекции иконок, которые можно свободно использовать в своих проектах.
4
Нарисуйте дизайн сайта. В документ, содержащий заготовку шаблона страницы сайта в графическом редакторе, добавьте прозрачные слои. Выделите и залейте в них области, соответствующие фону страницы. Заполните области с градиентной заливкой и периодическими текстурами. Вставьте логотип, статические изображения, иконки. Очертите границы блоков. Добавьте текст. Каждый законченный элемент дизайна, статическое изображение и логотип помещайте в отдельный слой. Перемещайте изображения в слоях для того, чтобы добиться требуемой компоновки.
5
Сохраните рабочий "исходник" дизайна сайта в "родном" формате графического редактора. Это позволит вернуться впоследствии к его редактированию.

Совет 2: Как нарисовать свою страницу

Индивидуальный дизайн вашей интернет-странички - это хорошее начало любой предпринимательской, да и любой другой, деятельности в сети. Грамотно подобранные цвета и уникальные рисунки благоприятно скажутся на отношении к вам посетителей сайта. Добиться этого легко, нужно лишь следовать простой цепочке действий.
Инструкция
1
Подберите программное обеспечение для вашего сайта. В зависимости от способностей и версии "движка", будет зависеть свобода ваших действий. Это могут быть бесплатные версии вроде Joomla или drupal, которые в огромном количестве выложены в интернете на официальных сайтах.
2
Закажите свой собственный уникальный двигатель вашего ресурса. Создавать его самостоятельно не рекомендуется, так как на изучение всех тонкостей программирования могут уйти годы. Лучше оставьте это профессионалам.
3
Начинайте проектировку ресурса после того, как программное обеспечение будет выбрано. Определите возможные варианты оформления в зависимости от целей ресурса. Определите расположение и количество кнопок, чтобы пользователям было удобно перемещаться по сайту. Не загружайте ресурс лишними элементами.
4
Подберите размеры и масштабы изображений. Если вы создаете визуальную составляющую часть сайта с нуля, то у вас нет никаких ограничений. Отталкиваясь от заранее созданного шаблона, подгоняйте рисунки под имеющиеся форматы.
Как нарисовать свою <strong>страницу</strong>
5
Рисуйте сразу на компьютере. Вы, разумеется, можете нарисовать все заготовки на бумаге, отсканировать и подгонять под сайт. Однако, вы сильно потеряете и в качестве изображения и в потраченном времени. Приобретите графический планшет и, наслаждаясь возможностями компьютерной реставрации, создавайте шедевры сразу на заготовках для вашей страницы.
Как нарисовать свою <strong>страницу</strong>
6
Играйте с переходами различных слоев. Например пустите небольшой узор, который будет начинаться на шапке сайта, а заканчиваться на кнопках. Подобные вещи всегда радуют посетителей, и им захочется вернуться на него еще.
7
Используйте фотографии с фото-банков или свои собственные, если вы только учитесь рисовать. Вы сможете дополнять их различными графическими кистями или своим логотипом.
8
Разместите получившийся материал, заранее подготовив все детали сайта. Замена стандартных изображений сразу же сделает ваш сайт уникальным и намного более выразительным на фоне обычных "шаблонов". После того, как замена будет произведена, обновите страничку, и вы увидите результат.
Совет полезен?
При обнаружении недочетов, загрузите ту часть шаблона, которую нужно переделать, в графический редактор и исправьте ошибку.

Совет 3: Как нарисовать кнопки для сайта

Удобный интерфейс, отлично прорисованная графика, правильное расположение элементов на странице – половина успеха сайта у посетителя. Рисование кнопок для сайта – небольшая, но немаловажная часть работы над онлайн-проектом.
Инструкция
1
Попробуйте нарисовать круглую кнопку. Приведенный ниже способ универсален и для создания логотипов, аватарок. Рисовать ее не сложно, несмотря на количество действий, которое вам придется совершить.
2
Откройте программу Adobe Photoshop. Создайте новый документ, нажав комбинацию «Ctrl+N». Параметры изображения 300*300, разрешение 72 пикселя/дюйм. Фон и цветовой режим по умолчанию белый и RGB соответственно.
3
Лучше всего рисовать векторами, чтобы при уменьшении кнопки не ухудшилось ее качество. Выберите инструмент «Овал», зажмите Shift и от центра нарисуйте круг.
4
Теперь к получившемуся кругу примените несколько эффектов. Пройдите в меню «Слои» - «Стиль слоя» - «Параметры наложения». Здесь нужно будет наложить градиент.
5
Далее здесь же поставьте галочку напротив «Тиснение», чтобы придать кнопке необходимую выпуклость, и установите следующие параметры: стиль – обводящее тиснение, метод – мягкая огранка, глубина – 220%, размер – 1 пиксель, смягчение – 5 пикселей, угол – 135о без глобального освещения, высота – 32, режим подсветки – нормальный с непрозрачностью 30% , режим тени – умножение с непрозрачностью 25%
6
Для придания еще большего объема здесь же в параметрах наложения поставьте галочку на «Тень» и установите следующие параметры: режим наложения – умножение, прозрачность – 40%, угол – 125о с использованием глобального освещения, смещение – 5 пикселей, размер – 20 пикселей.
7
Результатом произведенных действий станет такое изображение, как показано на рисунке.
8
Теперь создайте новый слой, вновь выберите «Овал» и нарисуйте круг меньшего радиуса, чем первая фигура. Откройте «Параметры наложения», поставьте галочку напротив «Внутренняя тень» и установите параметры: режим наложения – мягкий свет, угол – 125о, смещение – 0 пикселей, стягивание – 45%, Размер – 21 пиксель.
9
Далее здесь же в параметрах наложения отметьте «Наложение градиента» и создайте градиент с параметрами как на картинке. Нажмите ОК
10
Далее установите стиль наложения – радиальный, масштаб – 124%
11
Теперь поставьте галочку напротив пункта «Обводка» и задайте такие параметры: размер – 5 пикселей, положение – снаружи, режим наложения – нормальный, непрозрачность – 100%, тип обводки – градиент.
12
В итоге этих действий должно получиться нечто, уже более похожее на кнопку. Вы можете вновь открыть параметры наложения и поэкспериментировать с ними.
13
Теперь нужно добавить кнопки бликов, чтобы кнопка обрела стеклянную фактуру. Для этого опять создайте новый слой, выберите инструмент «Овальное выделение», создайте овал над кнопкой и залейте его белым при помощи инструмента «Заливка». Зажмите Ctrl, кликните на слой с цветным кругом, инвертируйте выделение («Выделение» - «Инверсия»). Теперь жмите Delete. Овал должен обрезаться по периметру круга.
14
На панели слоев измените параметр «Обычное» на «Мягкий свет», затем нажмите на значок векторной маски и выберите инструмент «Заливка» - «Градиент». Залейте блик снизу вверх. Кнопка почти готова.
15
Можно на кнопку добавить надпись. К ней также можно применить эффекты наложения, такие как внутреннее, внешнее свечение, градиент и так далее. Не бойтесь экспериментов, чем больше фантазии вы прилагаете в работе, тем быстрее освоите как сам редактор, так и веб-дизайн.
Видео по теме
Обратите внимание
Как нарисовать макет сайта. Приступим к рисованию макета будущего сайта. Буду рисовать конечно несложный макет, так сказать theme framework — минимальный дизайн, но при помощи которого можно сделать вполне приличный и насыщенный дизайн сайта.
Совет полезен?
Как нарисовать макет для сайта в Photoshop. Прежде чем приступить к работе, нужно определиться со структурой.

Совет 4: Как нарисовать иконку в Фотошопе

Adobe Photoshop, как и многие другие редакторы, имеет достаточно функций, чтобы создавать иконки. Его отличие в том, то он поддерживает загрузку готовых операций для редактирования иконок, которые вы можете применять при их создании.
Вам понадобится
  • - программа Adobe Photoshop;
  • - доступ в интернет.
Инструкция
1
Скачайте и установите на свой компьютер программу Adobe Photoshop. Здесь подойдет абсолютно любая версия данного графического редактора, поскольку с созданием иконок может справиться и другие программы, наиболее простые в управлении и работающие с файлами расширения .ico –это и есть поддерживаемый иконками формат.
2
Приобретите в обязательном порядке лицензию на использование программного обеспечения. Зарегистрируйте программный продукт через интернет или телефон, если этого не было сделано ранее. Запустите Adobe Photoshop и выберите создание нового файла.
3
Задайте ему необходимый размер, после чего нарисуйте при помощи панели инструментов слева основные элементы картинки. Выполните редактирование изображения при помощи соответствующего меню сверху, если надо, примените специальные фильтры для придания того или иного эффекта. Выполните сохранение файлов в соответствующем разрешении.
4
Воспользуйтесь специальными файлами, загружаемыми в программу Adobe Photoshop в виде истории операций. Такие вы можете найти на сайте devianart.com в разделе Actions. Скачайте понравившиеся вам файлы, подходящие по стилю к планируемому дизайну вашей иконки.
5
Скачанные файлы скопируйте в окно истории, после чего выберите среди них нужный и нажмите в текущем окне операций кнопку со стрелочкой вроде Play на проигрывателях. Также на различных ресурсах можно встретить и специальные фильтры, созданные для редактирования файлов иконок. Они отличаются в основном только наличием привычного для иконок оформления.
6
Сохраните ваши иконки конечную директорию и далее используйте их по своему усмотрению. Для замены иконки какого-нибудь элемента операционной системы воспользуйтесь пунктом «Свойства» в контекстном мню при нажатии на него правой кнопкой мыши. Далее в соответствующем разделе укажите путь к папке.
Видео по теме
Совет полезен?
Если вы будете пользоваться специальными фильтрами, лучше всего устанавливайте последнюю версию программы.

Совет 5: Как нарисовать меню сайта

В сети можно найти множество макетов сайтов. Ими удобно пользоваться в тех случаях, когда нет времени на то, чтобы писать весь код с нуля. Гораздо проще отредактировать имеющийся шаблон, изменив его дизайн. Так, чтобы нарисовать собственное меню сайта, необходимо выполнить несколько действий.
Инструкция
1
Для примера рассматривается работа в системе ucoz. Оформление различных элементов сайта часто задается с помощью таблицы стилей (CSS). Чтобы получить к ней доступ, войдите в панель управления, используя учетную запись администратора. На главной странице панели выберите раздел «Управление дизайном».
2
В развернувшемся списке страниц, доступных для редактирования, выберите в категории «Общие шаблоны» пункт «Таблица стилей (CSS)». Просмотрите информацию, прописанную в строках, относящихся к общему оформлению (блок General Style) и конкретно к меню (блоки, в названиях которых стоит слово Menus). Вам необходимо выяснить, какие параметры заданы для панели меню: ширина, высота, фон панели и кнопок, изображения и так далее.
3
Если параметры вас не устраивают, замените их на те, которые вам нужны, и сохраните шаблон. После этого, уже можно запускать графический редактор и, используя полученные сведения, рисовать собственные кнопки. Сохраните их и вернитесь на сайт. В меню «Инструменты» выберите пункт «Файловый менеджер» или нажмите одноименную строку-ссылку, расположенную под блоком с кодом.
4
Загрузите на сайт новые кнопки (стрелки-указатели или другие графические элементы, которые вы будете использовать в меню). Пропишите значение для кнопок в коде (например, background: url('http://ссылка на изображение из файлового менеджера') no-repeat ХХpx ХХpx), задайте параметры для выравнивания, положения на странице. Пропишите стиль и размер шрифта для разделов меню (font-family и font-size) и внесите другие изменения, нужные вам.
5
Нажмите на кнопку «Сохранить», дождитесь оповещения о том, что шаблон успешно сохранен и откройте страницу сайта, чтобы оценить результат проделанной работы. Если вас что-то не устроило, вы можете отменить свои действия в окне редактирования CSS, воспользовавшись кнопкой в виде стрелки влево на панели инструментов.
Видео по теме
Полезный совет
Разработайте и сохраните в виде отдельных изображений типовые элементы дизайна сайта (например, меню, текстовые блоки) для их многократного использования в шаблоне.
Поиск
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500