Сайту нужны авторы — уроки фотошоп

Как сделать макет или дизайн сайта в Photoshop

По многочисленным просьбам читателей, мы сегодня будем делать дизайн, вернее макет сайта в Photoshop.

Конечно если с этим никогда не сталкивался, сделать его довольно не просто, возникает множество вопросов, на которые я сегодня постараюсь ответить.

Как оказывается, что материала по этому поводу в интернете не так уж и много. Дизайнеров куча, а как сделать макет сайта никто не рассказывает. Может быть я просто плохо искал? 🙂

Продолжение

В общем давайте уже делать.

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

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

Программное обеспечение

Первое, что Вам нужно это Photoshop. Если у Вас его нет, покупайте 🙂

Создание и размеры документа

Чтобы создать новый документ в Фотошопе нужно зайти в «Файл» и кликнуть «Создать», затем появится окно, в котором нужно задать соответствующие размеры.

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

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

В моём случае сайт будет иметь ширину в 1200рх. Таким образом я сделал документ шириной в 1300 рх и высотой в 4000 рх. Остальные настройки оставьте как есть.

Фон шаблона сайта

После того как мы создали документ, в первую очередь сделайте фон для сайта. Не важно, что это будет цвет или картинка но сделайте его. В моём случае это просто белый фон. Выбираем инструмент «Заливка» в палитре цветов выбираем белый цвет, затем просто кликаем по фону.

Ширина будущего сайта в 1200 рх

Теперь нам нужно выставить размер будущего сайта, чтобы он выглядел так же как будет смотреться в браузере. Делать мы будем это с помощью линейки. Если она у Вас не активна, нужно зайти в «Просмотр» и поставить галочку на против «Линейка». Затем она должна появиться у Вас в окне просмотра.

А вот как она выглядит:

Выделяем наш слой, нужно просто один раз кликнуть на него:

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

После того как мы нашли центр, нужно поместить наш сайт шириной в 1200 рх в центр документа который имеет размер в 1300 рх.

Для этого выбираем инструмент «Прямоугольная область», сверху устанавливаем Стиль на Заданный размер, куда пишем вот такие значения: ширина — 1200рх, высота 400рх.

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

Теперь нашу выделенную область помещаем с помощью мышки по центру, она найдёт центр сама. Затем нужно вытащить ещё 2 линейки и установить их по обе стороны выделенной области. Таким образом мы обозначаем границы нашего будущего сайта, который будет иметь ширину в 1200 рх. Так же по этим линейка будет проще подгонять элементы дизайна. Если Вам не понятно сделайте так же как на рисунке ниже.

Линейку мы будем использовать и в дальнейшем, так как без неё здесь не обойтись, она позволяет выставить всё ровно.

Теперь мы практически полностью подготовили наш документ. Мы узнали середину, а так же обозначили точный размер за который не нужно вылазить. Теперь переходим к самому интересному, а именно к созданию дизайна сайта (макета).

Создание дизайна или макета сайта

Важно!

Всегда создавайте группы для слоёв и давайте им названия. Потому что в дальнейшем точно запутаетесь!

Группы

Создаём группу, и называем её «Хидер» (Шапка) в ней же создаём под группу «Верхнее меню» так как будем начинать именно с него. В группе создаём новый слой и называем его «фон». Это будет фон нашего верхнего меню.

Вот что должно получиться:

Верхнее меню

Опять вытягиваем линейку и выставляем её как на рисунке:

Выбираем инструмент «Прямоугольная область» и выделяем вдоль горизонтальной линейки:

В палитре цветов вбиваем вот этот цвет #0dbfe5, выбираем инструмент «Заливка» и заливаем выделенную область, затем нужно отменить выделение во вкладке «Выделение» нажмите на «Отменить выделение»:

Кликаем на инструмент «Горизонтальный текст». Сверху в панели выбираем шрифт «Segoe UI». Теперь кликаем на голубом фоне меню и пишем название наших страниц. Потом Вы можете переместить текст куда Вам нужно.

Теперь создаём разделители между страницами. И сделаем им небольшой эффект вдавленности. Создаём новый слой, выбираем инструмент «Линия». Затем зажимаем Shift и рисуем вертикальную линию через весь голубой фон нашего меню.

По слою с фигурой нажимаем два раза мышкой, откроется окно со стилем слоя. Ставим галочки на против «Наложение цвета» И вбиваем туда вот этот цвет #0aaacc.

Переходим в пункт «Тень» и задаём следующие параметры:

Вот, что должно получиться:

После этого просто копируем слой с нашей линией и выставляем после каждого слова. Вот что у меня получилось:

Иконки социальных закладок

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

Для начала с помощью линейки нужно выставить высоту наших иконок, что бы они были ровными. Вот , что нужно сделать:

Потом создаём группу, называем её  «Социальные закладки», создаём в ней новый слой. Теперь кликаем по инструменту «Произвольная фигура» выбираем нужную фигуру:

Наводим курсор в то место где будет иконка, зажимаем Shift, (для того чтобы иконка появилась ровная) и растягиваем до нужных размеров. И такой же процесс повторяем со следующими фигурами. В конечном итоге вот что должно получиться:

Переходим к логотипу. Опять же создаём отдельную группу для логотипа и в новый слой.

Логотип

Переходим на этот сайт и качаем шрифт. Выбираем инструмент «Горизонтальный текст». Ищем в поле со шрифтами название нашего шрифта Olivier. Кликаем на то место где будет располагаться лого и пишем название на Английском, потому что этот шрифт не поддерживает кириллицу. Вот что должно получиться:

Создаём группу «Нижнее меню» и новый слой.

Нижнее меню (Главное)

Выставляем линейки как на рисунке:

Выбираем инструмент «Прямоугольная область» и выделяем. Затем выделенную область заливаем вот этим цветом #303030. Вот что должно получиться:

Отменяем выделение во вкладке «Выделение». Теперь идём во вкладку Фильтры — Шум и выбираем Добавить шум. Потом выставляем такие значения:

Добавляем название рубрик, кликаем по инструменту «Горизонтальный текст» и пишем название рубрик, делайте как у меня:

Добавляем линии. Делаются они так же как и в верхнем меню только изменён сам цвет линии. Думаю, что вы справитесь, и должно получиться вот что:

Сейчас переходим к панели с информацией, которая будет говорить пользователю где он находится на сайте.

Как обычно в группе «Хидер» создаём группу «Инфо панель» с новым слоем.

Панель с информацией

Для начала добавляем полосы с линейки как на рисунке ниже:

Выбираем инструмент «Прямоугольная область» и выделяем область прям под меню, и заливаем её чёрным цветом #000000

Далее создаём новый слой, потом тем же инструментом выделяем область которая ниже и заливаем её вот этим цветом #eeeeee

Отменяем выделение, берём «Горизонтальный текст» изменяем размер шрифта на 48 пт и цвет #a4a4a4. Пишем «Последние Записи». Вот, что у Вас должно получиться в итоге:

Контент

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

Сразу же нужно создать 2 отдельных группы:

  • Метки — в эту группу мы будем добавлять текст с размером наших колонок.
  • Контент — группа где будет находиться вся наша середина сайта.

В группе контент создаём под группу «Левый», в которой будут находиться наши блоки с записями.

Выбираем инструмент «прямоугольная область», задаём ей стиль «заданный размер» и выставляем ширину 800рх высоту 100рх. Вот итог:

Добавляем линии с линейки как на рисунке, и отменяем выделение:

Получается что мы добавили две линии и получили область где будут находиться наши блоки с записями.

В группе «Контент» делаем под группу с названием «Правый» (Сайтбар). Будем размечать место для правой колонки сайта.

Опять берём «прямоугольная область», а вот в стиле области задаём немного меньший размер в ширину 350рх высоту оставим ту же в 100рх. И далее делаем всё как на рисунке:

Вот теперь мы точно знаем где будут блоки с записями и сайтбар. И всё будет ровно.

Помните мы создали группу метки? Там просто создайте слой с надписями размеров блоков, вот как у меня:

Эти метки очень помогут при вёрстке. Не нужно будет вспоминать размеры.

Блоки с записями

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

В группе «Левый» создаём подгруппу «блок» и новый слой.

Опять выбираем инструмент «Прямоугольная область». В стиле задаём размеры 800 х 300. Подгоняем под линии. Потом заливаем вот этим цветом #d9d9d9. Это у нас получилась миниатюра.

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

Теперь давайте добавим заголовок к записи. Берём «Горизонтальный текст» ставим размер в 35 пт и цвет чёрный. Добавляем прям под миниатюрой:

Добавляем информацию к посту. Ставим размер шрифта в 14 пт и цвет ближе к серому:

И описание к посту:

Сейчас давайте добавим кнопку Далее. Она тоже очень простая. Выбираем инструмент «Прямоугольник со скругленными углами» задаём ему вот это цвет #0dbfe5 и радиус углов в 2рх. И рисуем кнопку размера который Вам понравится:

Теперь добавляем текст и смотрим, что у нас получилось:

Чтобы записи хоть не много разделить, давайте создадим простой разделитель из кругов.

Создаём группу «Разделитель», выбираем «Овальная область» создаём слой. И под блоком записей зажимая Shift рисуем круг, затем заливаем его вот этим цветом #efefef.

Отменяем выделение и ищем середину круга с помощью линейки

Выбираем слой с нашим кружком на нём же нажимаем правую кнопку мыши и выбираем «Создать дубликат слоя». Перетащите его немного влево.

В верхней панели заходи во вкладку «Редактирование» — Трансформирование и выбираем Масштабирование. И делаем круг немного меньше первого, при этом зажимая Shift чтобы круг получился ровным.

Вот что должно получиться:

Копируем слой этого маленького круга опять перемещаем его влево. Так же точно уменьшаем его размер как написано выше, чтобы получилось вот так:

Сейчас Вам нужно создать дубликат среднего круга и переместить его вправо, и тоже самое сделать с маленьким кругом. Чтобы было понятнее сделайте как на рисунке:

А вот что получилось только в нормальном размере:

Сейчас размещаем блок записей под блоком. Создаём дубликат нашей группы «Блок» На панели инструментов выбираем курсор (самый верхний). И перетаскиваем наш блок записей вниз. и так делаем раз 5.

Сайдбар (правая колонка)

Находим нашу группу «Сайдбар», и создаём в ней подгруппу «Поиск». С помощью линии делаем вот так:

Выбираем инструмент «Прямоугольная область» и выделяем поле для поиска, затем заливаем его вот этим цветом #eeeeee

Не забываем отменить выделение, кликаем на инструмент «Горизонтальный текст» и в сером поле пишем слово Поиск

Слева выбираем инструмент «Произвольная фигура» и сверху ищем фигуру лупы. Она есть в стандартных фигурах. Создаём слой в группе «Поиск» наводим на поле и рисуем нашу фигуру удерживая Shift.

Поле поиска готово. Теперь переходим к виджетам.

Создаём группу «виджет» и новый слой в ней. Затем добавляем линий как на рисунке. Это будет фон нашего заголовка, и заливаем его эти цветом #eeeeee

В наш заголовок теперь нужно добавить сам заголовок, делаем это с помощью текста. А ещё добавим иконку к заголовку. Для этого нужно выбрать любую фигуру которая по душе, и которая по смыслу подходит 🙂 Не забываем зажимать Shift когда добавляем фигуру. И залейте её вот этим цветом #0dbfe5

И конечно же нужно добавить записи к нашим виджетам. Нужно выбрать инструмент «горизонтальный текст», затем установить размер в 16 пт. И сделать ка на рисунке ниже

Затем просто создаём дубликат группы и перетаскиваем виджет вниз. Делаем то же самое что и с постами.

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

Читайте также:  Как сделать размытие в фотошопе - уроки фотошоп

Футер (Низ сайта)

Ну как же без него. В этом шаблоне он тоже не сильно сложный.

Всё как обычно создаём группу «Футер» и слой в ней. И размечаем его с помощью линейки, выбираем наш уже любимый инструмент «прямоугольная область» выделяем его и заливаем #0dbfe5

Отменяем выделение. Берём «Горизонтальный текст» находим тот шрифт, который мы скачали (Olivier), и вписываем наш логотип, только цвет текста делаем чуть темнее.

А с правой стороны нашего футера добавляем меню такое же как сверху только без линии. Его даже можно просто скопировать и переместить вниз.

Вот и всё, друзья, у нс готовый макет, который уже можно верстать 🙂

Ещё, вот Вам его PSD файл. Скачивайте, и смотрите если что то не поняли.

Скачать

Друзья, если Вам что нибудь будет не понятно, обязательно спрашивайте в комментариях.

До скорых встреч.

Источник: http://beloweb.ru/novichkam/kak-sdelat-maket-ili-dizayn-sayta-v-photoshop.html

Как научиться фотошопу с нуля: что делать и с чего начать

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

и этот вариант:

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

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

Скоро напишу отчет по моим урокам.

Сегодня у нас для вас есть интересная и полезная тема: как научиться фотошопу с нуля. Если вы умеете и любите рисовать, у вас хорошее чувство цвета, а не как у меня, вы уверены, что хотите получить знания в этой области и хорошо зарабатывать, то эта статья просто создана для вас.

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

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

Первое знакомство

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

Существует большое количество хороших источников для самостоятельного изучения программы. Если вы будете последовательно заниматься, то сможете быстро освоить Photoshop в считанные месяцы.

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

Хорошо, что сейчас все изменилось к лучшему.

Следующие шаги

Есть метод, который называют методом проб и ошибок. Проще говоря: способ интеллектуального тыка. Откройте программу и просто попробуйте ее «на вкус». Для начала ознакомьтесь с ее меню и инструментами.

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

Видео

В Сети масса полезных ресурсов, посвященных изучению Photoshop. Начните с одного из них, желательно чтобы обучающие видеоролики находились в топе выдачи поисковиков. Попробуйте пройти такое обучение. Сделайте вывод, подойдет ли оно вам. Один из этих курсов посмотрите на этой странице, или здесь. Постарайтесь приобрести такие видеоролики. Их полезность гораздо выше цены.

Они просто и доступно описывают процесс приближения к вершинам мастерства. Ничего сложного. Просто смотрите по одному видеоуроку и выполняйте домашние задания. Со временем это вам покажется совсем нетрудным делом.

Полезные ресурсы

Могу порекомендовать интересные страницы по Photoshop. На таких ресурсах можно встречаться с единомышленниками, осваивать новые интересные приемы и задавать вопросы. Вот подробный список:

  • photoshop-master.ru – масса нужных видео и книг и других вещей для новичков.
  • photoshop-help.ru интересный нужный блог с видеоуроками автора по мастерству, уроки переведенные с зарубежных сайтов, а еще дополнения для программы.
  • photoshopsunduchok.ru– большое количество уроков.
  • demiart.ru – этот портал самый известный и популярный в рунете. Масса нужного материала по дизайну и рисованию для начинающих.

Сайты буржунета

  • tutsplus.com – этот ресурс самый популярный в буржунете с уроками для профессионалов
  • textuts.com — тоже ресурс с уроками
  • fanextra.com — здесь уроки и всякие секреты
  • photoshoptutorials.ws – тоже на английском.

Книги

Очень советую всем начинающим читать больше полезной литературы. Вам понадобятся книги мастера своего дела Скотта Келби. Он умеет описывать сложные приемы простыми словами.

Уроки изложены по шагам, и сопровождаются цветными иллюстрациями. В принципе – это то, что нужно для начинающих. Не робейте! Многие мастера когда-то были самоучками. В Сети есть множество бесплатной литературы. Достаточно ввести слова «скачать литературу по фотошопу бесплатно» в поисковик, и через полчаса у вас будет огромная электронная библиотека.

Польза практического опыта

Хорошо, если у вас есть знакомые, которые владеют хотя бы азами этой проги. Ну а если это будет мастер своего дела, то такому другу – нет цены! Можно получить массу консультаций от знакомых. И они будут заниматься с вами совершенно бесплатно, из дружеских побуждений.

Вы можете также устроиться на работу в фотоателье, типографию, редакцию газеты или другие места, где занимаются фотографиями и их редактированием. В таких местах работают настоящие профессионалы своего дела, которые будут рассказывать вам, как можно выполнять различные хитрые трюки, а вы будете помаленьку набираться опыта.

Поиск на ютубе и в соцсетях

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

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

Для начала вам понадобиться установить себе на компьютер бесплатную программу Free YouTube Download. Она скачивает видеоролики на компьютер.

Вбиваете в поисковик ютуба нужный запрос, потом находите нужный видеоролик.

Кликаете по экрану правой кнопкой мыши, и выбираете в подменю надпись «получить URL видео». На экране появляется рамочка с кодом видео. Копируете его и вставляете в программу Free YouTube Download.

Опыт с форумов

На многих ресурсах по фотошопу есть форумы. Проходите регистрацию и общайтесь с людьми на любые темы.

Биржи фриланса

Пользуйтесь знаниями фрилансеров.

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

Почему бы и вам не взять здесь бесплатно что-нибудь полезное? В конце концов – эта информация не засекречена? Вот и пользуйтесь себе на здоровье.

Вы и сами сможете подработать, обладая знаниями фотошопа. Даже вот вам пример — недавно на бирже work-zilla я опубликовал задание — вырезать меня из фотографии:

Согласитесь, даже для новичка — это не сложное задание. А на этой бирже ест и посложней.

Дополнения

На многих ресурсах можно скачать дополнения для Photoshop, их называют psd исходники. Посмотрите, как они работают. Их огромное количество в Интернете, и при желании можно подобрать целую коллекцию.

Не стесняйтесь своих работ

Больше практикуйтесь, выполняйте свои первые задания, и потом выставляйте на разных форумах. Вот хотя бы этом photoshop.demiart.ru/. Здесь бывают настоящие профессионалы, которые укажут вам на ляпы, и посоветуют, как их можно избежать.

Поначалу, конечно, будет и критика, но это не повод, чтобы опускать руки. С повышением вашего профессионального уровня, вас начнут хвалить. Все это будет способствовать достижению конечного результата.

Разница платных и бесплатных уроков

А сейчас для тех, кто не хочет напрасно терять время даром. Здесь два пути.

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

Я говорю сейчас о бесплатных видео.

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

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

Так что, если в двух словах: идете на курсы, учитесь, и на биржу зарабатывать. В этой статье я рассказывал как стать фрилансером и давал список бирж.

С уважением, Павел Ямб.

Источник: https://copirayter.ru/kak-nauchitsya-fotoshopu-s-nulya-s-chego-nachinat-novichku/

Лучшие источники уроков для Adobe Photoshop

Выполнение уроков для Adobe Photoshop — лучший способ изучения программы, особенно на первых этапах. Самые полезные техники, которыми вы еще не раз будете пользоваться в будущем, приобретаются именно во время повторения уроков.

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

Профессионалы настоятельно рекомендуют изучать программу именно на оригинальном языке.

Design.tutsplus.com

Здесь есть всё: уроки для новичков, продвинутые техники, эффекты для текста, сложные и интересные фотоманипуляции, уроки рисования и многое другое. По большому счету, если вы только начинаете свой путь в мире Adobe Photoshop и более-менее понимаете английский, потеряться на этом сайте можно надолго.

Psd-dude.com

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

Planetphotoshop.com

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

Textuts.com

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

Photoshopstar.com

Сайт публикует не очень сложные уроки в разных областях работы с Adobe Photoshop. Удобно то, что прямо в главной панели вы можете выбрать интересующую вас категорию: базовые техники и работа с инструментами, рисование, эффекты, графический дизайн, обработка фотографий, текстовые эффект и веб-дизайн.

Photoshoptutorials.ws

Сайт с уроками, интервью и бесплатными ресурсами, который регулярно обновляется. Здесь можно найти фотоманипуляции, эффекты для текста и техники для обработки фото.

Psd.fanextra.com

Здесь публикуются уроки в основном по несложным фотоманипуляциям. Подходит для новичков, в целях усвоения базовых техник на довольно простых примерах. Однако задерживаться на уроках с этого сайта надолго не стоит — переходите к более сложным урокам, как только почувствуете что справляетесь с этими.

Psdvault.com

Здесь собраны уроки по фотоманипуляциям. Даже туториялы, которые завялены как текстовые эффекты по сути выполняются в технике фотоманипуляций, а не при помощи стилей слоя, как это принято.

Минус сайта в том, что уроки по сути в одном стиле и техники используемые в них довольно однотипны.

Однако они все равно интересны и если разбавлять эти уроки с туториалами из других источников, получится отличное сочетание.

Designstacks.net

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

Alfoart.com

Это сайт уроков от Александры Фомичевой.

По сравнению с порталами, на которых пишут многие авторы, здесь конечно значительно меньше материала, зато он очень классный! Работы Алескандры всегда очень атмосферны и интересны, а описания уроков понятные, краткие и емкие. Пожалуй для совсем начинающих пользователей Adobe Photoshop эти туториалы будут сложноваты, зато те, кто уже немного освоился в программе получат немало удовольствия.

Читайте также:  Плоские иконки - уроки фотошоп

Blog.spoongraphics.co.uk

А это сайт с уроками от широко известного в дизайнерских кругах Криса Спунера. Он любит совмещать работу в Adobe Photoshop с Adobe Illustrator, однако есть уроки и для программ в отдельности.

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

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

Аbduzeedo.com

И еще один авторский сайт, который не так часто радует уроками для Photoshop, зато в каждом уроке описана очень стильная работа. На этом сайте нужно учиться тому как быстро и не очень сложно делать крутые по дизайну и стилю работы.

Автор подборки — Дежурка

Смотрите также:

Источник: http://www.dejurka.ru/articless/photoshop-tutorials-resourches/

Видеокурс «Photoshop для чайников, 57 практических уроков»

Да. Данный видеокурс можно смотреть как в Windows, так и в OS X (Mac OS), так и в любых других системах, где есть веб-браузер и поддержка видеоформата MP4.

Куда обращаться при возникновении вопросов по курсу?

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

Нужно ли активировать курс перед просмотром?

Курс работает сразу. Никаких ключей и кодов активации вам не понадобится. Вы можете смотреть курс на стольких компьютерах, на скольких хотите.

Есть ли версия курса на диске?

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

Могу я оформить заказ сегодня, а оплатить его позже?

Да, это возможно. Просто начните оформлять заказ, после корзины вы увидите ссылку «Сохранить заказ в личном кабинете, я оплачу его позже». Посмотрите видеоинструкцию:

Где скачать и как установить Фотошоп?

Об этом вы можете узнать из этой статьи:
https://photoshop-master.ru/blog/post/gde-skachat-i-kak-ustanovit-fotoshop.html.

Чем отличается «Photoshop для чайников, 57 практических уроков» от «Фотошоп с нуля в видеоформате 3.0»?

В курсе «Photoshop для чайников, 57 практических уроков» нет подробного описания инструментов и команд программы Adobe Photoshop. Здесь представлены только практические уроки по различным направлениям: реставрация и ретушь снимков, создание коллажей и оформление фотографий, рисование, дизайн, создание текстур и текстовых эффектов.

В какой версии фотошоп записаны уроки курса?

Часть уроков записаны с использованием CS6, а большинство в версии СС 2014, СС 2015.

Я не из россии, могу ли я купить курс?

Да, конечно. Доступные способы оплаты для вас: Карты Visa/MasterCard/Maestro, Яндекс.Деньги, RBK Money, WebMoney, QIWI, Денежные переводы, Paypal. После оплаты вы получите письмо со ссылкой на закачку курса на ваш компьютер, если же при оформлении была выбрана доставка на флешке, то кроме этого письма мы отправим вам курс на флешке бандеролью авиапочтой.

Я не нашел ответ на свой вопрос. как быть?

Обратитесь к нашему онлайн-консультанту. Кнопка онлайн-консультанта расположена в нижнем правом углу страницы. Либо вы можете написать в нашу службу поддержки по адресу: https://evgeniypopov.ru

Если подвести итог всему, что было рассказано на этой странице, то получится примерно следующее. Вам нужно хорошо изучить Adobe Photoshop и желательно сделать это быстро и недорого.

Поэтому вам не подходит вариант с книгами, офлайн курсами, персональным наставником и бесконечными уроками из интернета.

Вам нужна пошаговая система от надежного автора, который расскажет и покажет все инструменты и функции программы на конкретных примерах.

Такую систему мы вам и предлагаем, она называется «Photoshop для чайников, 57 практических уроков», которая состоит из 57 видеоуроков высокого качества и продуманных по структуре.

Что важно, курс стоит в несколько раз дешевле подобных офлайн курсов, куда надо еще ездить и нельзя воспроизвести много раз, как это можно сделать с видеокурсом. Такой курс — это прекрасная инвестиция в ваше развитие.

По нему сможете учиться и вы, и ваши близкие.

Инвестиция в собственное развитие — одно из мудрых решений, которое вы можете когда-либо предпринять

Брайн Трейси

Источник: https://photoshop-master.org/c/13191

Топ 10 бесплатных сайтов для изучения Adobe Photoshop

Adobe Photoshop – профессиональный фоторедактор с богатым набором инструментов и функций для обработки фотографий и создания изображений с нуля. Многообразие функций редактора поражает и позволяет создавать потрясающие воображение картины, однако нужно уметь правильно пользоваться данной программой. 

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

photoshop.demiart.ru — сайт собирает со всего интернета уроки Photoshop на русском языке. Данные уроки научат всех желающих рисовать, обрабатывать фотографии и создавать спецэффекты, а также познакомят с секретами компьютерной графики. На сайте можно скачать Photoshop с плагинами, фильтрами, кистями и шрифтами для него. Требуемый урок можно найти по определенному тегу, организованы темы для обсуждения тонкостей каждого урока. 
Arttower.ru – форум со множеством уроков для поверхностного и углубленного освоения фотошопа. Портал работает с 2007 года. Здесь можно задать интересующие вопросы по поводу использования редактора. Здесь же можно найти учебники, справочные материалы и многое другое.
Globator.net — сайт существует с 2006 года и собрал с того времени множество полезных уроков, которые позволят покорить фотошоп. Приятная особенность для талантливых учеников: сайт часто проводит конкурсы с призами, после конкурса у победителя берут интервью и размешают на сайт.

Photoshop-master.ru – сравнительно молодой, но активно обновляющийся сайт. Здесь есть возможность оформления подписки, после чего дважды в месяц ученики будут получать на бесплатной основе видеоуроки по фотошопу. На сайте периодически устраиваются занимательные конкурсы.

PhotoshopLessons.ru – сайт предоставляет множество бесплатных уроков по программе Adobe Photoshop – затрагивающих от простых основ до тонкостей темы. Есть онлайн-учебник, описание инструментов и фильтров фотошопа. Также здесь можно найти бесплатные курсы и проверить полученные навыки на фотошоп онлайн

Psand.ru — на сайте в наличии инструкции по созданию текстовых эффектов, дизайну, фотообработке, эффектов для фото, полезные видеоуроки. Здесь хранятся учебники и базовые уроки, а также видеокурсы, онлайн-самоучитель и уроки фотошопа CS5 и CS6 на русском языке для простого и эффективного начала освоения редактора.
Adobemaster.ru — уроки фотошопа для начинающих. Посетитель получит возможность освоить технику съемки и обработку фото.Goldenone.ru – некоторые приемы владения программой для пользователей продвинутого уровня.

Англоязычные сайты

Webdesign.org – сайт, представляющий собой электронную библиотеку. Посетители найдут множество различных уроков по теме покорения фотошопа, также есть множество уроков по другим темам.

Psdtuts.com – полезный сайт с уроками. Все они являются авторскими и сделаны профессионалами в ремесле фотошопа. При этом сайт платит приличную сумму за каждый новый авторский урок по Adobe Photoshop. Помимо бесплатных, есть платные курсы по теме.

17 февраля 2017

Источник: https://vse-kursy.by/read/62-10-besplatnyh-saytov-dlya-izucheniya-photoshop.html

Лучшее ресурсы для изучения Photoshop онлайн

Программа Adobe Photoshop — это растровый графический редактор, разработанный и выпущенный компанией Adobe для Windows и Mac ОС. Photoshop является одним из наиболее широко используемых программных обеспечений для редактирования в мире.

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

Всемирная паутина — это замечательная вещь, напичканная учебными материалами и ресурсами для людей, желающих научиться искусству фотошопа.

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

БЕСПЛАТНЫЕ РЕСУРСЫ ДЛЯ ИЗУЧЕНИЯ ФОТОШОП ОНЛАЙН

1) Adobe Helpx

Согласитесь, что никто не знает лучше фотошоп, чем сам Adobe. Данный ресурс сделал классификацию всех уроков по Photoshop, разделив их на категории согласно уровню квалификации.

Новички могут начать изучение с обзора, прежде чем перейти к продвинутой технике.

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

2) Adobe Know How

Этот сайт был запущен не так давно компанией Adobe, и обещает стать захватывающим, а, главное, дать отличный опыт обучения различным продуктам компании и в том числе Photoshop. Ресурс позволяет отмечать и добавлять заметки при просмотре видео.

3) Phlearn

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

4) Adobe TV

Безусловно, Adobe TV является очевидным и лучшим выбором, чтобы получить знания и информацию о любых продуктах компании. Тут вы найдете некоторые великолепные учебники для начинающих и тонны отличного видео.

ПЛАТНЫЕ РЕСУРСЫ С УРОКАМИ ПО ФОТОШОПУ

5) Lynda

Один из любимых ресурсов для графических дизайнеров. Цена подписки начинается от $25 в месяц. Вы получите доступ к 17 000 видео-уроков по фотошопу, а также 290 часов работы в программе с онлайн-контентом.

Но даже это не все: сервис позволяет выбрать любимого инструктора. Все специалисты разбиты по категориям с учетом уровня квалификации.

Вы можете точно настроить пирамиду вашего опыта, начиная от азов и заканчивая изучением передовых методов. 
 

6) Kelbyone

Kelby One – это еще один платный учебник-сайт, который в основном сосредоточен на фотографии и обучению Photoshop онлайн.

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

Кстати, став членом Кelby one, вы получите огромные скидки на все — от фото- и видеокамер до программного обеспечения, от ноутбуков до освещения, от плагинов до печати, и все это в одной мастерской.

7) Udemy

Более восьми миллионов студентов по всему миру обучаются на этой платформе, что лишний раз подтверждает – Udemy является отличным сайтом для изучения фотошопа. Будь вы профессиональный графический дизайнер или начинающий все, что вам нужно сделать, это просто тратить несколько баксов и получить пожизненный доступ к урокам Photoshop от разных авторов.
 

8) Eduonix

Eduonix — это довольно новый сайт, который позиционирует себя как «самая любимая платформа онлайн-обучения фотошопу».

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

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

Более 35 лекций и 8 часов контента, которые включают в себя использование различных инструментов обработки и редактирования, изучение и освоение коррекционных технологий, использование Photoshop в профессиональных проектах.

9) Digital-Tutors

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

Ресурс предоставляет широкий выбор обучающих материалов, охватывающих цифровую живопись и концепт-арт. Вы можете подписаться на месяц за $29, что позволит получить доступ ко всему каталогу сервиса, располагающему более 2000 курсов.

Кроме того, ежедневно добавляются новые учебные видео.

ТЕКСТОВЫЕ ОБУЧАЮЩИЕ МАТЕРИАЛЫ

10) Tuts+

Блог, который затрагивает некоторые лучшие уроки Photoshop. Сайт имеет обширную библиотеку для изучения материалов, охватывающих много различных областей, включая иллюстрации и текстовые эффекты. Пользователи из разных наборов навыков могут выбрать обучение искусству ретуширования, дизайну иконок, обработке фотографий, текстовым эффектам и многому другому.

11) Tutorial9

Один из лучших бесплатных ресурсов изучение Adobe Photoshop. В настоящее время ресурс располагает 30 страницами онлайн-обучения. Наряду с учебниками вы можете скачать различные плагины для фотошоп — шрифты, пакеты иконок, кисти, пользовательский интерфейс и графику, текстуры, шаблоны и темы. Tutorial9 также предоставляет доступ к статьям по дизайну.

12) Psd Learning

Сервис был запущен в 2008 году и управляется дизайнером Россом Эйткен, который имеет большой опыт в области графического дизайна. Все очень хорошо организованно, разложено по разным категориям с чистой схемой помощи и удобной навигацией. Здесь вы можете узнать все от написания сценариев до создания драматических постеров для фильмов.
 

Заключение

Графический дизайн является одним из наиболее динамично растущих направлений. Он будет продолжать расти в ближайшем будущем, и всегда будет оставаться одним из самых перспективных вариантов карьеры. Так что, учитывая все эти факты, вы можете уже сегодня воспользоваться списком предложенных нами ресурсов и начать изучать Photoshop.

Источник материала

Источник: https://freelance.today/poleznoe/luchshee-resursy-dlya-izucheniya-photoshop-onlayn.html

1-я часть курса

  • Метки дополнения:
  • верстка
  • web дизайн
Читайте также:  Глянцевый 3d текст - уроки фотошоп

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

Вопрос звучит примерно так: «Как нарисовать сайт в Фотошопе и как его потом сверстать в реально работающий сайт?»

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

Но примерно месяц назад один славный парень по имени Felix Boyeaux создал урок по созданию сайта (дизайн+верстка) с нуля.

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

Весь процесс разбит на две большие части:

1. Дизайн сайта в Фотошопе

2. Кодирование сайта с помощью HTML+CSS+jQuery

В данном цикле видеоуроков мы разберем первую часть. В следующем — вторую.

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

Итак, начнем!

Вот итоговый сайт, который мы с Вами будем делать

Урок 1. Введение, подготовка нового документа и его разметка

Продолжительность: 12 мин 36 сек | Размер: 25 Мб

Скачать

Урок 2. Создаем верхнюю часть сайта

Продолжительность: 20 мин 9 сек | Размер: 28,3 Мб

Скачать

Урок 3. Создание шапки и логотипа

Продолжительность: 11 мин 22 сек | Размер: 16,7 Мб

Скачать

Урок 4. Создание области контента

Продолжительность: 9 мин 54 сек | Размер: 16 Мб

Скачать

Урок 5. Работаем над центральной частью сайта

Продолжительность: 9 мин 17 сек | Размер: 14,6 Мб

Скачать

Урок 6. Создаем блок слайдшоу

Продолжительность: 10 мин 26 сек | Размер: 11,4 Мб

Скачать

Урок 7. Создаем текстовый блок напротив слайдшоу

Продолжительность: 12 мин 31 сек | Размер:16,2 Мб

Скачать

Урок 8. Рисуем навигационные вкладки

Продолжительность: 16 мин 57 сек | Размер: 27,2 Мб

Скачать

Урок 9. Создаем блок для вывода записей с блога

Продолжительность: 22 мин 33 сек | Размер: 36 Мб

Скачать

Урок 10. Создаем блок твиттера

Продолжительность: 16 мин 16 сек | Размер: 26,5 Мб

Скачать

Урок 11. Создаем футер и копирайты, исправляем ошибки

Продолжительность: 13 мин 43 сек | Размер: 26,4 Мб

Скачать

Дополнительные материалы

Скачать

PSD-исходник

Скачать

  • В этом уроке вы познакомитесь с отличным плеером для показа видео на вашем сайте JW Player, а также научитесь взаимодействовать с ним, привязывая к разным моментам просмотра видео всякие события. Например, если вы делаете какую-то продающую презентацию и хотите, чтобы люди увидели кнопку заказа только ближе к концу презентации, то с помощью данного видео вы сможете это сделать.
  • Я думаю, вы уже много раз наталкивались на эффект дразнящего уголка на сайтах разных инфобизнесменов. Этот прием хорошо себя зарекомендовал, поэтому с помощью него вы сможете немного увеличить свою подписную базу или повысить продажи.
  • Многие мечтают о хорошей системе комментариев на своем сайте. Ведь большое количество комментариев к вашим материалам создают активность аудитории, благодаря которой видно, что сайт живой, и его посещают другие люди. Но проблема в том, что большинство стандартных систем комментирования, которые встроены в движки сайтов, позволяют оставлять комментарии только зарегистрированным пользователям. Либо, если открыть их для всех, то вас замучают спамеры.
  • Гостевые книги часто используются на сайтах в качестве эффективного способа обратной связи с людьми, которые заходят на ваш сайт. Посетители могут высказать свое мнение относительно сайта, дать какой-то совет или задать вопрос. И в этом уроке мы установим на сайт, работающий на движке джумла, компонент гостевой книги phoca guestbook.
  • Последние несколько лет все свои покупки на аукционе ebay и многих интернет-магазинах я оплачиваю с помощью системы PayPal. Это удобно, безопасно и быстро. О том, как открыть счет в этой системе, я расскажу в двух видеоуроках, которые записал специально для вас.

Видеокурс «HTML с нуля»

Если вы давно хотите как следует изучить HTML, то у меня для Вас есть отличная новость!

Вы можете совершенно бесплатно получить полноценный курс по HTML из моего платного сборника. 33 видеоурока от Евгения Попова!

Бесплатно!

Список уроков и подробности получения курса здесь

Видеокурс «CSS с нуля»

Если вы уже изучили HTML и хотите двигаться дальше, то следующим шагом будет изучение технологии CSS.

Так же, как и в случае с HTML, вы можете совершенно бесплатно получить полноценный курс по СSS из моего платного сборника. Вас ждет 45 подробных видеоуроков от Евгения Попова!

Бесплатно!

Список уроков и подробности получения курса здесь

При регистрации введите промокод 1popov и получите 28 дней бесплатного использования.

Источник: https://ruseller.com/adds.php?id=1673

Как сделать дизайн сайта в фотошопе с нуля

Дата редактирования: 19.03.2015 Просмотрен: 30535

Дизайн это один из этапов в процессе создания сайта. От того как будет выглядеть сайт зависит первое впечатление посетителя, комфорт пребывания и удобство пользования сайтом. Статья не описывает основы дизайна, их можно почерпнуть из соответствующей литературы. Статья описывает сам процесс и некоторые его тонкости. Конечный результат которого можно найти в конце страницы.

Существует много программ для создания дизайна, в том числе и для сайта. Однако в данной статье я рассмотрю, как сделать дизайн сайта в фотошопе с нуля своими руками. Так как считаю, что именно эта программа наиболее удобна для этой цели. 

Создание и подготовка файла проекта

Для начала нужно открыть фотошоп, кликнуть в левом верхнем меню программы «Файл > Создать». И настроить новый файл следующим образом:

  1. Дать имя своему макету, у меня на примере «mysite«
  2. Ширину рекомендую выбрать в зависимости от разрешения монитора минус 20px. У меня разрешение 1440х900px. А высоту сделать 1200px, при необходимости в будущем можно будет ее увеличить.
  3. Единицы измерения установи в «Пикселях«. Разрешение «72» Пиксели/дюйм.
  4. Жми «OK». И сохраняй его как psd «Файл > Сохранить как…» в нужной папке.

Создай новый слой и сделай его активным. Выбери инструмент «Прямоугольник«,  установи в параметрах инструмента значение «Пиксели»  и создайте прямоугольник размером 1000х1200px (его заливка будет зависеть от того, какой цвет фона выбран основным). 

Теперь слой с прямоугольником нужно разместить по центру холста. и установить направляющие по краям. Направляющие имеют полезное свойство прилипать к границам активного слоя.

Теперь нужно установить отступы внутри прямоугольника и поставить направляющие. Для этого я пользуюсь инструментом для выделения «Прямоугольная область«. А именно создаю выделенную область нужного размера, перетаскиваю ее в нужное мне место и тяну направляющую пока она ни прилипает к краю выделенной области. Обычно я устанавливаю отступы 15-20px.

Получится вот так:

Все первоначальная настройка макета окончена.

Сохрани, то что получилось «Файл -> Сохранить для Web -> PNG-24«

Теперь открой в проводнике или файловом менеджере папку с сохраненным файлом:

  1. Правый клик на файле
  2. В контекстном меню «Открыть с помощью»
  3. Выбери браузер которым пользуетесь (у меня hrome).
  4. После того как изображение откроется наведи на него курсор, он сменится на лупу с плюсиком
  5. Кликни один раз для отображения изображения в полный размер.

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

Создание шапки сайта

Теперь залей слой, который мы использовали для установки направляющих, белым цветом. И приступим к созданию шапки сайта. Для этого создай новую группу слоев и назови ее «Шапка сайта»

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

Что бы добавить свой логотип (если его нет, то читай Как сделать логотип онлайн) нужно:

  1. Открыть его в Photoshop. Желательно, что бы он был хорошего качества и имел формат png с прозрачным фоном.
  2. Выбрать инструмент «Перемещение» (это стрелочка напоминающая курсор)
  3. Открой вкладку с логотипом
  4. Наведи курсор на изображение логотипа
  5. Нажми и не отпускай левую кнопку мыши
  6. Тащи изображение на вкладку с макетом
  7. Не отпуская кнопки задержи без движения курсор на нужной вкладке до тех пор пока она не станет активной и не появится твой макет
  8. Теперь тяни курсор на холст с макетом и отпусти левую кнопку мыши.

Если все правильно логотип скопируется новым слоем на холст с макетом.

Теперь нужно подогнать размер логотипа (комбинация клавиш ctrl+t) таким образом, что бы он был не сильно большим, но и не был мелким и выровняй его левый край по направляющей. Что бы проверить правильно ли подобран размер сохрани свой макет в формате png-24 и открой в браузере.

Теперь я создаю новую группу слоев и называю ее телефоны. При помощи инструмента «Текст» пишу «Горячая линия» и номер телефона организации «+7 (3435) 25-60-60». Я разместил телефон в шапке по двум причинам.

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

Я так же подобрал подходящий на мой взгляд шрифт, размер и выровнял телефон по правой внутренней направляющей.

Создание дизайна главного меню сайта

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

Теперь нужно добавить пункты меню и подобрать для них подходящий цвет (один пункт меню я оставил белым — это нужно для того что бы показать как будет выглядеть пункт меню при наведении курсора мыши)

Теперь, что бы менюшка лучше смотрелась, а пункты меню имели визуальные разделители я добавил полоски по 2 пикселя в ширину. Один пиксель сделал чуть темнее, а другой чуть светлее основных цветов градиента прямоугольника. Потом размножил и распределил их между пунктами меню.

И на последнем шаге я добавил hover эффект (эффект при наведении курсора мыши) для одного из пунктов меню.

Создание дизайна левого меню сайта

Честно говоря это меню сделано в том же стиле и мало отличается от предыдущего по методу его создания поэтому весь процесс описывать не буду. Однако хочу заострить внимание на следующих моментах:

  1. Разделение места при создании дизайна вопрос больной и требует особого внимания. Я для себя решил, что левое меню не должно быть больше 250 px так как большая ширина съедает место у контента. Однако все зависит от конкретного макета
  2. Отступы между блоками не следует делать меньше 10 px. На мой взгляд оптимальными значениями являются 10px, 15px, 20px
  3. Что бы сделать пунктирную линию в фотошопе прочитайте соответствующую статью
  4. Создавая пункты меню я не делал для каждого пункта отдельный текстовый слой. Можно это сделать в одном слое начиная каждый пункт с новой строки (через ентер), а потом просто отрегулировать меж строчный интервал в окне «Символ»

Я использовал 14 размер и стандартный для Windows шрифт «Verdana«

Получилось вот такое меню:

Дизайн содержимого сайта

Теперь пришло время изобразить как будет выглядеть содержимого сайта. По идее нужно отрисовывать все типы содержимого сайта. А именно главная страница, формы, раздел новости и т.д., я же ограничусь простой текстовой страницей сайта.

У любой страницы должен быть заголовок и собственно сам контент. Для начала я установлю две направляющие. Первую горизонтальную по верхнему краю меню. Вторую вертикальную на расстоянии 20px от левого края левого меню.

Далее создаю слой с заголовком, слой с текстом и перетаскиваю заранее подготовленные изображения кофе. Что бы текстом было управлять легче возьми инструмент «Текст» и нажми левую кнопку мыши и потяни по диагонали. Получится прямоугольник определенного размера. Теперь можно скопировать туда текст, форматировать его и менять размер блока теста при необходимости.

Получилось вот что:

Дизайн подвала сайта

В подвал сайта обычно помещают счетчики, дополнительные дублирующие меню, копирайт и т.д. Я так и сделал, разве что меню не разместил.

Создаем два прямоугольника по аналогии с меню и размещаем счетчики и прочую информацию, что бы получилось вот так:

Результат:

Мы рассмотрели как сделать дизайн сайта в фотошопе (photoshop) с нуля своими руками. А дальше все зависит от Ваших творческих способностей и владения программой.

Источник: http://www.opengs.ru/site/dizajn-sajta.html

Ссылка на основную публикацию