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

Если у вас фотошоп не установлен то посоветую ставить 9 версию, именуемая как CS2. Почему именно эту? Да можно и другую но не рекомендую ставить 10-ю (CS3) потому как в работе вам не пригодится то что напихано в ней а компьютер будет грузить по полной.


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


В открывшемся окне задаём параметры документа, на начальных порах нам хватит 950 по ширине и 500 по высоте, как показано на рисунке. Фон рисунка выставляем Transparent - Прозрачный.



Создали, молодцы!!! Терерь зальем его каким либо цветом, нажав на квадратик в левом баре как на рисунке. Я применил цвет #3a383d


Нажимаем на лейку, на рисунке ведро и наведя на созданный документ жмём левую кнопку, фон готов.
У вас на фейсе фотошопа постоянно должны присутствовать ещё два открытых окна, это окно Layers - Слои и окно History - История вашей деятельности. В обоих окнах можно в любой момент удалить ваши деяния, отметив и нажав на корзину, которая находится внизу справа.



Едем далее. В окне Layers создадим новый слой, нажав на квадратик с отогнутым уголком, рядом возле корзины. У вас в окне появится новый слой с названием Layer 2 Если кликнуть на имени два разо подряд мышкой то можно слои переименовать, что я и сделал. Так лучше воспринимается и не будем путаться.
На этом всё. Сохранаем документ под именем header с расширением PSD со слоями, поставив галочку на опции Layers.



Закрываем фотошоп и судорожно ищем подходящие картинки у себя на дисках или в сети интернет, которых там валом. Правда на поиски может уйти не один день, как повезёт. Из найденной кучи надо выбрать те, которые лучше всего подходят под тему. Так как я создаю сайт на тему музыки то я нашел картинку с софитами и вставил её 3 раза, каждую изменив. Для каждой картинки обязательно!!! создаём новый слой как описано выше. Вам будет удобнее в дальнейшем манипулировать расстановкой сюжетов. Если поместить все три или более картинок на один слой то двигая одну картинку поедут все. Это надо запомнить и не забывать. Конечно, при создании второй картинкия сделал следуещее, создал дубликат первой, кликнув правой кнопкой мыши на слой в окне Layers и нажал на Duplicate Layer.... Слой создался автоматически. Затем заходим в верхнем меню-баре в Edit -> Transform -> Flip Horizontal жмем и смотрим, картинка отразилась по горизонтали, что нам и надо. Затем я применил некоторые фильтры, маски и получилось то что вы видите на картинках. Эти фички объяснять долго и для начала достаточно того что показал.






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

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



Выбрав подходящее фото я начал вырезать участников от основного фона фотографии. Есть много приёмов по вырезанию. И программы и плагины но ничего не заменит наши глаза и руки. И так начнём. Первым делом, для удобства нам нужно всю фотографию положить на новый прозрачный фон. Делается это так. На левом меню баре выбираем прямоугольное выделение и выделяем всю фотографию или кусок который нам следует обработать. Выделели. Теперь удерживая клавишу Ctrl нажимаем клавишу C чем мы сохраняем в буффере обмена наше выделенное фото. Затем удерживая клавишу Ctrl нажимаем клавишу N, тем самым мы создадим новый слой со строгими размерами выделенной фотографии или её участка. Вы сами увидите создаваемый слой, не забудте создать его прозрачным, как, я уже описывал в начале. И последнее. Удерживая опять же клавишу Ctrl нажимаем клавишу V, эти мы вставляем из буффера обмена выделенное фото или её участок.
Ну что??? Все понятно??? У мотросов нет вопросов??? Уффф... Устал. Давайте перекурим.

Так, покурили? Едем далее. Сохраните созданное фото в формате PSD] потому как могут быть казусы а у вас не будет приготовленного фото.Теперь увеличим его как можно больше и начнём заниматься вырезанием. Выбираем участок который мы будем удалять и нажав стрелочку на левом меню баре нажимаем клавишу P, у вас появится перо с крестиком с права. Это нам и надо. Пером расставляем точки по контуру как показано на рисунке как можно точнее и чаще. От этого зависит качество вырезаного участка. Последнюю точку ставим на первую, замыкая вырезаемый участок. Теперь этот участок надо выделить. Делается это таким образом: Удерживая клавишу Ctrl нажимаем правую!!! клавишу Enter, мы увидим пунктирное выделение. Что бы очистить от фона участок удерживая клавишу Ctrl жмём клавишу X. Вот и готово, участок вырезан и мы видим просвет. Постыпаем таким образом для всех частей фотографии.


Когда вы проделали для все фотографии описанные действия то можно загрузить ранее сохранённый проект. Что бы поместить фото в проект вам достаточно его переместить с одного окна в другой, удерживая левую кнопку мыши, предварительно создав новый слой в пректе.
Фото ваше может значительно отличаться по размерам от размеров проекта, это поправимо. Вверху ставим галку на Show Transform Control как на картинке:


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


Как только размеры привели в порядок, жмём на стрелку в левом меню баре. Выскочит окно с приглашением, соглашайтесь, если уверены. Теперь следует снять вверху галку, нехрен ей нам мешать, перемещаем слой на место назначения. Если вас удовлетворяет то начнём заниматься сглаживанием контура вырезаного слоя фотографии. Для этого увеличиваем проект как можно больше и видим зубцы по контуру выреза. Чтобы устранить я взял Smudge Tool, что находится на левом меню баре и вверху выбрал значение 5 пикселов. Вы увидите мыш в виде круга, проводя которым по контуру фото мы будем сглаживать сам контур, уменьшая зубчатку. На фото ухо сглажено, голова нет и на ней видны следы переходных зубцов.



Когда все подотрём, переходим к следующей детали. Создадим новый слой а в нём сделаем вверху прямоугольное выделение и зальём цветом #2d1b0f - примерно тёмно коричневым.Создаём ещё слой и на нём делаем так же прямоугольное выделение которое зальём белым цветом. Теперь кликните 2 раза на этот слой в окне слоёв или в этом же окне на круглую кнопку с буквой F внизу. Вы попадаете в стиль слоя, где выставляете тень, градиент и другие стили для выбранного слоя как на картинке.


Когда выставите всё как хотите или по аналогии с моим то у вас получится так


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


Затем создаём дубликат слоя и смещаем его немного вверх и в право, применяем к нему градиент и получаем объёмный текст как на рисунке.


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

Готовый сайт находится здесь: http://group-sg.ru/ Это первый вариант.

Это первый вариант, просто фото с фотошопа



Это второй вариант, фото страницы на локалке


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