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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Тренировка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Онлайн Фотошоп - полезные сайты

Интересные записи

• Фотошоп для чайников - Обучение Фотошопу
• Рисуем сайт в Photoshop курс 2
• УРОК ФОТОШОПА Рисуем ресницы и тени на фотографии в онлайн фотошопе
• Не умею работать в фотошопе, но очень хочу научиться! Подскажите с чего начать и как действовать!
• Узнаем вместе
• Рисуем дым