этот Adobe Photoshop Учебник будет показывать и обсуждать, как использовать Photoshop для разработки веб-сайта, который будет экспортироваться в качестве html и изображения срезов. Позднее это может быть в html Редактор программы, такие, как Adobe Dreamweaver. это Adobe Photoshop веб-дизайн учебник с указанием о том, как создавать целые веб-страницы прямо в Photoshop.
Авраам chaffin CreativeCOW.net, Камбрия, Калифорния США
Есть много разных способов подхода к разработке веб-сайта. некоторые выбрать дизайн всего дело в Dreamweaver, или сделать быстрый набросок на бумаге, а затем строить их на сайте, в то время как другие предпочитают графический дизайн подхода и использования Photoshop в качестве инструмента разработки. создать свой сайт в качестве Photoshop Файл первый делает создание сайта позже гораздо проще по ряду причин.
начало любой концепции дизайна заключается в том, чтобы получить хорошую вдохновение из-нибудь, что вы уже можете увидеть. таких, как художник получает вдохновение от мира вокруг них, веб-дизайнер будет также получить вдохновение от того, что они видят. Иногда это существующий сайт, Сайт шаблонов, или изображение, графический, или логотип.
В дополнение к хорошему вдохновения является признанием Вашей целевой аудитории и разработки вокруг того, что их устраивает. формат и стиль должны быть в некоторых соответствии с тем, что ваша аудитория уже использовать для. разрешение экрана также должна учитываться при разработке веб-сайта. ширине страницы, и первый раз в вашей странице важны для успеха вашего сайта. (на это раз в вашем районе зритель видит, прежде чем они вниз страницы.), Тогда как размещение только больше разрешение экрана, может сделать вашу работу легче вы вырезания части вашей аудитории. Большинство пользователей Интернета сегодня использовать большее разрешение экрана, чем когда-либо прежде, и в будущем веб-сайт построен на маленьком экране резолюции станет меньше одного из факторов, но сейчас он все еще должен быть рассмотрен.
Это также возможность для Вашего сайта иметь гибкую ширину тем, что оно расширяется и сжимается основана на пользователей размер окна, это оптимальное при попытке создать сайт, который будет учитывать все. сайт для размещения окна размером не менее 750 пикселей в ширину оптимален. минимальная резолюция использоваться большинство людей сегодня составляет 800 х 600.
шаги по созданию веб-сайта с помощью Photoshop являемся:
1. использовать Photoshop разрабатывать внешний вид и расположение сайте вы хотят.
2. ломтик изображения в Photoshop, Экспорт нарезанных изображений или в качестве html. понимание html форматирование помогает многое для толкования, как кусочек вашего изображения, чтобы идти в html.
3. создать html шаблона в соответствии с Photoshop дизайн сайта и опустить нарезанный изображения или использования Dreamweaver скорректировать html файл, Photoshop создаются из вашего PSD ломтиками.
Дизайн сайта в данном учебном пособии будут построены из образа Бесси в своем пастбище.
Это должно быть счастливой сайте = O
создание графического заголовка
первая часть разработке веб-сайта в Photoshop создает графический заголовок на вашем сайте. заголовок графического является основной графической части Вашего сайта, который будет рассматриваться первым и будет центром для общего внешнего вида вашего сайта. получить готовые графические заголовка здесь.
3. кадрировать изображение до 745 х 320 с коровой логотип на правой стороне изображения. Для этого выберите прямоугольный шатер инструмент (м), Затем под стиль раскрывающемся выбрать фиксированный размер. положить в 745 пикселей в ширину и 320 пикселей в высоту. Позиция вашего шатер для создания заголовков и обрезать изображение (меню Изображение культур).
4. создать маленький 10 пикселя перо в верхней части изображения. выберите инструмент градиент (G), Нажмите на градиент в верхней градиентной инструмент окно, задать начальный и конечный цвет белый, установить начало непрозрачности до 0%, а окончание непрозрачность до 100%. создать новый слой и перетащить и создать на съезд в верхней проведение смены сделать пандус прямой.
5. облегчить графическим путем создания еще одного пандуса над изображением, а начиная с нижней, и освещение в верхней (удерживайте сдвиг держать прямо рампой). в конце точку автомагистраль должна быть примерно 300 пикселей в изображении выше, дать хорошее дымки на графические. Это дает появление на светлое день на ферме корова.
6. Наконец мы собираемся облегчить заголовок графического еще дальше, создав еще один вертикальный автомагистраль в противоположном направлении, что и предыдущий. начальной точки должны быть даже в верхней части коровьего логотип и внизу должна быть 1 пиксель выше нижней части графического.
7. Сохранить заголовок графические в папку, где вы собираетесь создать свой сайт, используя сохранить для Web (Alt + Shift + Ctrl + S). сохранить в JPG, оптимизированный, составляет около 70 качества.
заголовок графического уже создали. графический может использоваться по-разному в шаблон сайта. использовать ее на его полном масштабе и оберните навигации и текстом вокруг него, или уменьшить размер и установите его на более современный дизайн шаблона макета.
разработка макета сайта в Photoshop
дизайн Вашего веб-сайта должна иметь по крайней мере в трех отдельных частей, которые включают конкретные элементы:
1. заголовок
Логотип компании
графический баннер
ссылки / кнопки для дома, о, и контактную страницу
2. тело
Содержание области для текста на странице
фотографии или графические изображения, совмещенные с содержанием
3. колонтитул
Информация об авторских правах
Ссылки на политику / Условия использования, и вернуться к началу ссылке
При создании макета дизайна в Photoshop Не забудьте оставить место для дополнительной навигации, Текст, и на сайте расширения в будущем, или вы можете найти самостоятельно, нуждающихся полностью перестроить свой сайт, потому что вы не оставили места для ссылки на другие страницы в Вашем дизайн. следующие шаги для создания макета для Photoshop Веб-сайт макета, который может быть скачать здесь.
меры для последующей:
1. создать новую PSD Файл 745 пикселей х 600 пикселей и сохранить его в качестве макета.psd
2. место заголовок графические в документе. (открыть файл заголовка (g_header.JPG), выберите его (Ctrl + A), Копировать (Ctrl + C), активировать макет.PSD Окно, Вставить (Ctrl + V).)
3. используйте инструмент перемещения (V), чтобы переместить заголовок в верхней части макета проведения смены, чтобы она оснастки на место в верхней.
4. открыть Логотип компании, скопировать и вставить его в свой формат.
5. преобразовать логотип (Ctrl + T) и переместить его в верхний левый угол сайта макет.
6. с помощью горизонтального типа инструмента (Т) создать небольшие текстовые ссылки в небе между двумя логотипами на верхней части руководства. введите слово "дом", 4 пространства, "Контакт", еще 4 пространства, , а затем "О программе". Текст должен быть примерно 12 пт, шрифт Arial, используя цвет # a6ff94 для удовольствия светло-зеленый цвет.
7. предоставить текст dropshadow (слой стиль слоя dropshadow), с расстояния 2 и размером 3.
8. Позиция текста с помощью перемещения инструмента и стрелок соответствующим рядом с логотипом вверху слева.
9. ниже, чем меньше корова логотип мы создадим некоторые крупные навигации / фото ссылки:
с помощью горизонтального типа инструмента (Т) типа "Домашняя страница 1 страница 2 страница 3 страница 4" с использованием Arial, Шрифт 17 пт с черным текстом. положить около 4 или 5 пробелов между словами дать некоторые кнопки пространство.
создать новый слой
и перетащите его ниже текст, который вы только что создали
с прямоугольными шатер средства (м) выбрать район только вокруг крупных навигации.
выбрать краску ведро Tool (G) и заполните выделенную область в новый пустой слой (# a6ff94) в зеленый цвет.
сделать этот слой выглядит как кнопка, перейдите в меню слой стиль слоя конических и выбивать. использовать настройки по умолчанию, нажав кнопку OK
используя одну колонку шатер инструмент удаления столбца пикселей между каждым словом в твердом зеленом фоне слой вы только что создали. это будет разделить на конических и каждое слово выглядит как отдельная кнопка. Вам возможно, придется увеличить, чтобы получить право в период между словами.
8. дублировать зеленую кнопку слой, перетащив его на новом слое кнопкой или перейдите в меню слоя дубликат слоя.
9. выбрать нижний слой зеленую кнопку, и добавить к движению размывание слоя с расстояния примерно 150 пикселей, перейдите в меню Фильтр Размытие Motion Размывание.
10. переместить слой вниз размыты примерно на 10 пикселей и уменьшить дымность на 20%. Это дает тонкую линию под Вашим кнопки помочь разделить рейтинг от содержания.
12. создать новый слой за авторского текста, который станет фоне колонтитул текст, Убедитесь в том, что слой выбран.
13. Использование прямоугольной шатер Tool (M), чтобы выбрать область по всей нижней части страницы, а лишь немного выше, чем авторского текста.
14. используйте краску ведро Tool (G) и заполнить площади с ярко-зеленым (# a6ff94).
15. перо краям, используя внутренний накал стиля слоя (слой Меню Стиль слоя внутренний накал) установить смесь режим нормальной, цвет белый (# FFFFFF), и размером до 10 пикселей.
Мы сейчас разработали простой, веселье, веб-сайт в Photoshop с Колонтитулы. белое пространство между заголовком и колонтитул будет все текстуальные содержание и изображения, которые будут заполнить в самом веб-сайте.
нарезка изображений Photoshop на веб -
Теперь о том, что мы разработали простой веб-сайт Photoshop мы кусочек его на куски и экспортировать изделия в качестве html файл, который можно использовать и позже изменены в Dreamweaver. нарезка когда ваш веб-сайт дизайн помнить, что каждый ломтик станет отдельной ячейке таблицы, и таким образом пытаются сохранить ломтиками, как много и как можно проще. Убедитесь, что и начало и конец вашей ломтиками за разработку когда это возможно, так Photoshop не ошибка одного пикселя может быть упущена, как кусочек. открыть веб-дизайна мы сделали раньше, выбрать кусочек Tool (K), и давайте начал. (включите щелкающий за лучшие результаты - в меню Вид оснастку (Ctrl + Shift +;), Убедитесь в том, защелкиваться слоев включен.) Скачать нарезанный PSD файл здесь.
меры для последующей:
создать один ломтик во все графические. начало за пределами графической и конец за пределами графической. Это поможет рассказать Photoshop чтобы не создавать единую пиксельная графика то, что мы не хотим.
ломтик колонтитул графического начала и окончания в серых вне формата. Пусть щелкающий найти в верхней части слоя для вас.
ломтик заголовок весь путь через началу начала над графическими в серых и заканчивая чуть ниже крупных навигации. Это должно ломтик корову в двух (Oh No! ). Вы должны теперь иметь 3 ломтика для заголовка части, Ваше содержание, и ваш колонтитул.
ломтик все кнопки, попробовать, чтобы убедиться, что щелкающий к той же позиции для каждой кнопки, чтобы высота кнопки те же. для низкого, больше кнопок можно легко и быстро нижней части окружающего ломтик.
ваш Photoshop веб-дизайн должен быть нарезанный сейчас и готовы экономить на веб -.
Экспорт / экономия Photoshop ломтики, как веб-страница
В более ранних версиях Photoshop Сохранение нарезанных изображений в Интернете может быть сделано только с ImageReady, но теперь все это встроенный в Adobe Photoshop CS3. следующую часть учебник покажет вам, как сохранить нарезанный дизайн сайта мы сделали в Photoshop в качестве html файл с соответствующими изображениями.
меры для последующей:
с ломтиками открыть графический выбрать меню Файл Сохранить для веб И устройств (Alt + Shift + Ctrl + S). Таким образом, деятельность в Интернете, за исключением устройств, И окна.
в соответствии с предварительно раскрывающемся выбирать JPEG высокого за качество и тип файла. (это просто предпочтения.)
щелкните оптимизированы меню стрелкой, чтобы открыть этот подпункт меню и нажмите Изменить настройки вывода...
Мы не будем вдаваться в подробности о выходных параметров. выбрать по умолчанию параметры настройки раскрывающемся. использование предыдущей и следующей посмотреть на все параметры.
нажмите кнопку OK, а затем сохранить. убедитесь, что экономия в месте, где вы можете найти легко.
выберите Сохранить как тип: html и изображения (*.html )
Параметры: по умолчанию
ломтиками: все слайсы
нажмите кнопку "Сохранить"
поздравления вы сейчас успешно разработала веб-сайт Photoshop, нарезанный он, , а затем успешно экспортироваться в качестве html файл! Есть несколько простых изменений, которые необходимо сделать, прежде чем же конструкции могут быть в полной мере использовать в качестве веб-страницы или веб-сайта шаблон, но я оставлю это для другой учебник.
Теперь о том, что мы разработали простой веб-сайт Photoshop мы кусочек его на куски и экспортировать изделия в качестве html файл, который можно использовать и позже изменены в Dreamweaver. нарезка когда ваш веб-сайт дизайн помнить, что каждый ломтик станет отдельной ячейке таблицы, и таким образом пытаются сохранить ломтиками, как много и как можно проще. Убедитесь, что и начало и конец вашей ломтиками за разработку когда это возможно, так Photoshop не ошибка одного пикселя может быть упущена, как кусочек. открыть веб-дизайна мы сделали раньше, выбрать кусочек Tool (K), и давайте начал. (включите щелкающий за лучшие результаты - в меню Вид оснастку (Ctrl + Shift +;), Убедитесь в том, защелкиваться слоев включен.) Скачать нарезанный PSD файл здесь.
создать небольшие текстовые ссылки в небе между двумя логотипами на верхней части руководства. введите слово "дом", 4 пространства, "Контакт", еще 4 пространства, , а затем "О программе". Текст должен быть примерно 12 пт, шрифт Arial, используя цвет # a6ff94 для удовольствия светло-зеленый цвет.
и перетащите его ниже текст, который вы только что создали
