САЙТЫ в ФОТОШОП

Оформление страниц сайта

Нарядно оформленные страницы сайта способны привлечь внимание посетителей. Да и вообще, на таких приятнее находиться.

Представленные ниже два образца, создавал в программе "Фотошоп" во время изучения её возможностей для оформления страниц сайтов.
Ну, а в конце страницы есть уже несколько сайтов, сделанных на заказ. Желающие могут смотреть сразу

Продолжение обучения по созданию сайтов в программе "Фотошоп"

Естественно, продолжил учиться создавать разные сайты в фотошоп, чтобы закрепить навыки, полученные в самом начале. Результаты ниже.

Сайт.
Сделан при обучении работе с программой по курсу "Веб-дизайн".

Здесь уменьшенная копия в формате JPG, а оригинал (PSD с неслитыми слоями) создавался с учётом последующей блочной HTML+CSS вёрстки по всем правилам.

**Особо не заботился о смысле содержимого.
Главное - понят принцип использования фотошоп для придания страницам оригинальности.
Дальше уже (подключить их) - дело HTML+CSS.

И ещё.
Не люблю нижние скроллы: двигаешь, двигаешь туда сюда ... ... . Раздражает.
Кто захочет посмотреть в натуральную величину, кликните по глазику
(откроется в новом окне).

Сайт.
Создал его при обучении работе с программой по курсу "Фотошоп для веб-мастера".

Аналогично.
Здесь также уменьшенная копия формата JPG. А сам оригинал (PSD) создавался из дополнительных материалов, приложенных к обучающему курсу.

Цель - научиться работать с "чужими" PSD-файлами, изменять любые шрифты, слои и прочее.

Думаю, цель достигнута!

Посмотреть сайт в полную величину можете, кликнув по глазику:
(откроется в новом окне).

Сайт.
Сделал его для себя, как аналог главной страницы моего сайта.

Делал во время планового, ежегодного повторения изученных курсов базовых веб-технологий.

Разумеется, курсы по веб-дизайну входят в их число.

О ежегодных повторениях здесь: "Обучение"

**Само собой, страница полностью работоспособна, и интересна тем, что для её дизайна пришлось применять разные навыки, а НЕ одни только хорошие знания фотошоп и основ веб-дизайна.

Оформил её в стиле "сайт-визитка". Посмотреть страницу, и проверить работу кнопок, ссылок, форм и прочее, можете здесь: "Личная страничка" (прямой переход).

Сайт.
То, что Вы сейчас видите, - пока только заготовка.

Взял её из материалов курса "Веб-дизайн" для тренировки по созданию сайтов-визиток.

Задание: с помощью фотошоп изменить рисунок, и сверстать действующий сайт-визитку.

Назвал его "Здоровье!".
Результат работы ЗДЕСЬ: (откроется в новом окне).

Кстати! Кликнув по синей стрелке "НАЗАД" в том сайте-визитке, Вы попадёте на главную страницу БОЛЬШОГО раздела, тесно связанного с использованием программы "Фотошоп" для веб-дизайна при создании сайтов.
Там я разместил ещё 2 действующих сайта, сделанных в разное время при тренировках по веб-технологиям.

Желающие, могут сразу туда пройти: "Шаблоны сайтов" (прямой переход).

Сайт.
Более точно - сайт-визитка.

Результат изучения основ веб-технологий (HTML+CSS), фотошоп, и тренировок по их совместному использованию в веб-дизайне сайтов.

Проверить работу ЗДЕСЬ: (откроется в новом окне).

**P.S.
По ссылке, найдёте 2 сайта.
Тот, что на скриншоте, и ещё более простой. Исходный.

Было нужно для обучения.

Точно так же - для обучения, при тренировках не только по программе "Фотошоп", а разным, ранее освоенным веб-технологиям, сделал эту группу из двух сайтов.

Сайт.
Первый из них - мини-сайт.

То, что Вы видите, скриншот действующего сайта, причём несколько изменённый в том же фотошоп.

Из трёх скришотов я просто собрал коллаж, чтоб Вы могли составить общее впечатление.

Посмотреть, и проверить его работу можете ЗДЕСЬ: (откроется в новом окне).

**P.S.
Кстати! Там найдёте довольно интересный блок, т.е. элемент веб-дизайна, выполненный с помощью соединения фотошоп и технологий HTML+CSS.

Ниже расположил скриншот второго сайта из общей группы. Разумеется, он так же как и первый полностью действующий.

Страница подписки.
Не буду его здесь подробно описывать.

Скажу лишь, что это результат изучения разных технологий, и не только базовых.

Он гораздо сложнее первого.

Однако же, чем здесь читать, проще зайти и посмотреть.

Проверить работу ЗДЕСЬ: (откроется в новом окне).

Ещё один интересный, действующий пример разработки дизайна сайта.

Веб-дизайн.
Повторяя, и тренируясь по соответствующим обучающим курсам, сделал этот сайт, как шаблон лендинга.

Он сложнее двух предыдущих примеров, т.к. объединяет на одной странице оба сайта.

Короче - это так же результат изучения нескольких разных веб-технологий, а не одного лишь фотошоп.

Результат работы ЗДЕСЬ: (откроется в новом окне).

Ещё действующий пример веб-дизайна страницы адаптивного сайта.

Веб-дизайн HTML+CSS.
Такой тестовый сайт сделал, изучая мини-курс базовых основ адаптивной вёрстки.

Создал его из приложенного PSD-файла курса, тренируясь в веб-дизайне и практике CSS.

Посмотреть, и проверить сайт на мобильных устройствах можно ЗДЕСЬ: (в нов. окне).

Ещё пример дизайна в фотошоп и, как и предыдущие, тоже действующий.

Веб-дизайн в фотошоп.
Этот сайт делал, как макет для последующей вёрстки.

Результат ежегодных плановых тренировок в создании разных типов сайтов.
Такой стиль веб-страниц часто встречается в интернете.

Готовый сайт ЗДЕСЬ: (откроется в новом окне).

И ещё. Действующий пример веб-дизайна объектов на странице сайта.

Веб-дизайн HTML.
Результатом одной из плановых тренировок по курсам веб-дизайна и основам CSS стал этот текстовой рекламный блок.

Подробно о технике создания таких рекламных блоков ЗДЕСЬ: (в новом окне).

Аналогично. Действующий пример HTML веб-дизайна, но уже целой страницы сайта.

Это тоже результат одной из тренировок по различным курсам веб-технологий. Кстати, я затрудняюсь сказать, по каким больше: фотошоп или программирование.

Идея дизайна принадлежит не мне. Взял её на зарубежном сайте, где исходник работает благодаря технологии "flash".
Меня же интересуют исключительно простые сайты, поэтому и занялся в своё время не только изменениями его дизайна, но и программного кода веб-страницы.

Пример "живёт и действует" в соответствующем разделе ЗДЕСЬ: (в новом окне).

* * *

Тренировка

Часто, и с удовольствием тренируюсь в фотошоп. Надоедят эти образцы - сделаю другие.
Возможности программы для создания нарядных страниц сайтов поистине безграничны.

Ниже поместил 2 "наброска", сделанные всего за полтора часа просто ради тренировки.

***

Сайты в фотошоп, сделанные по заказу

Как работаю с заказчиками веб-дизайна в фотошоп, на примере одного из этих сайтов, можете подробно узнать здесь: "Удалённая работа над дизайном сайта" (откроется в новом окне).

Ниже показал главную страницу другого сайта, сделанную по заказу.
После сдачи главной, оформлял ещё и внутренние, но там гораздо меньше работы в фотошоп. Кое-что разместил в других разделах.

**P.S. В оригинальном размере можно посмотреть, кликнув по глазику
(откроется в новом окне).
Контактные данные изменил перед публикацией.

***

Эту страницу сайта тоже делал по заказу его владельца, желавшего принять участие в партнёрской программе.
Кроме создания дизайна самой страницы, подключал её к действующему ресурсу.

**P.S. В оригинальном размере рисунок можно посмотреть, кликнув по глазику
(откроется в новом окне).
Аналогично. Контактные данные заменил перед публикацией.

Посмотреть этот же сайт и проверить работу ссылок можете здесь: "PSD-сайты"
(откроется в новом окне).

*P.S. Размещая на страницы портфолио, естественно, все ссылки заменил на свои.

***

Здесь по заказу выполнял дизайн всех страниц создающегося сайта.
Кстати сказать, работал для редизайна шаблона сайта, функционирующего на CMS Joomla.

Помимо дизайна главной страницы, делал, разумеется, и внутренние. Однако, они менее интересные (для меня) - меньше работы в фотошоп.

**P.S. Более крупный рисунок можете посмотреть, кликнув по глазику
(откроется в новом окне).

Т.с. Телефон и другие контактные данные заменил в рисунке перед публикацией.

***

Аналогично. По заказу сделал дизайн всех 6-ти страниц этого сайта-визитки. Перед Вами миниатюра главной страницы.

После сдачи заказчику дизайна финального макета, приступил к его вёрстке. По-другому такая работа называется: сделать "Сайт под ключ" (откроется в новом окне).

**P.S. Более крупный рисунок можете посмотреть, кликнув по глазику
(откроется в новом окне).

Т.с. Телефон заменил в рисунке перед публикацией.

***

Полагаю, для портфолио показал вполне достаточно.
Мне комфортно работать при разрешении монитора 800*600. Но это мне, а на заказ могу сделать под любой размер. Смотрите сами: либо (откроются в новом окне).

ВВЕРХ