Строение
Урок №3: Оригинальный бесшовный фон для вашего сайта.
Тема в разделе "Веб-Дизайн", создана пользователем artik69, 5 авг 2010.
  1. artik69

    artik69 Новичок

    Сообщения:
    163
    Симпатии:
    12
    Баллы:
    0
    Создаем бесшовный, оригинальный фон для своей web-странички.

    В этом уроке я расскажу, как создать оригинальный бесшовный фон при помощи замечательного графического редактора Adobe PhotoShop.
    Оригинальный потому, что такой фон будет только на вашей странице, так как вы создадите его сами, своими руками. Речь пойдет не об однотонном, бледном заполнении фона каким-то определенным цветом, а о «замощении» фона неким изображением.
    Что значит бесшовный? Дело в том, что каким бы html-редактором вы не пользовались, вы всегда будете сталкиваться с проблемой швов у фона замощенного какой-либо картинкой. В прочем, обо все по порядку.

    Итак, мы нашли подходящее изображение (в яндексе, в гугле, где угодно):



    Открываем его в PhotoShop.
    Картинка прямоугольная и немного крупноватая для нашей цели (наша была аж 800 х 600 пикселей), поэтому для удобства сделаем ее квадратной и размером, к примеру, 150 х 150 пикселей. Для этого выполним над ней следующие операции:
    Выберите инструмент Crop Tool и, удерживая Shift, «натяните» квадратную область по картинке, как показано ниже:



    и нажмите Enter. Лишнее обрежется. Далее, зайдите в меню Image -> Image Size и выставьте размер 150 пикселей по ширине (Width) и 150 по длине (Height).

    Вот такая картинка у нас теперь имеется:



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



    Вот те самые проблемы, о которых я говорил в начале урока. Швы, как говорится, «на лице», и они не особо эстетично смотрятся. Вот с этим мы сейчас и будем бороться. Но прежде сделайте копию документа с картинкой в окне программы. Для этого выполните команду Duplicate, которая находится в меню Image. Сверните или отодвиньте пока в сторону созданную копию (окно) документа. Она очень пригодится нам позже.

    Вернитесь в PhotoShop к нашему изображению 150 х 150 (сделайте его активным, выделите) и выполните с картинкой следующие действия:
    Filter->Other->Offset , установите в появившемся окне значения 75 по вертикали и 75 по горизонтали, оставив радиоточку на Wrap Around, нажмите ОК.
    Что случилось?! – спросите вы. – Теперь на нашей картинке появились швы прямо крестом посередине.



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



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



    Итак, приступим. Точнее продолжим. Легче всего «спрятать» швы «закидав» их изображениями монет. Где их взять? Правильно! На той картинке, которую мы оставили в качестве дубликата ранее. Воспользуйтесь инструментом Elliptical Marquee Tool для выделения подходящих (которые видны целиком) монеток на запасном изображении, после чего с помощью стандартных для всех редакторов команд меню Edit->Copy и Edit-Paste (Копировать - Вставить), по очереди вставьте их в наше изображение. Вам придется периодически переключаться с одного документа на другой. Не забывайте это сделать, иначе вы вставите вырезанную монетку в то же окно, с которого ее только что вырезали.



    Наши монетки-«заплатки» вставились в документ каждая новым слоем. Поэтому мы можем их подвигать, покрутить как нам удобно, чтобы закрыть все швы на изображении. Для того, чтобы двигать слой-монетку воспользуйтесь инструментом Move Tool (вообще после каждого выполненного действия с другими инструментами рекомендую возвращаться (выбирать) Move Tool).
    Для того чтобы повернуть слой-монетку воспользуйтесь командой Edit->Transform->Rotate. При этом можно одновременно не только поворачивать «контейнер» с активной функцией вращения, но и двигать его.
    Чтобы выбрать слой с нужной монеткой, достаточно кликнуть по нему в палитре слоев:



    Если хотите можете дать каждому такому слою свое название, например "Монетка 1", "Монетка 2" и т.д. Для этого кликните в палитре слоев по названию слоя, которое дано при его создании по умолчанию (в нашем случае "Layer 1", "Layer 2" и т.д.)
    Как видите, нам потребовалось вырезать и вставить в наше изображение 6 монеток.
    Внимание! Если у вас остались незначительные места со швами, вы можете «залечить» их при помощи инструмента Clone Stamp Tool . При этом важно (!) чтобы выбранным (активным) был слой с основным изображением. О том, как работает этот инструмент нужно рассказать подробнее. Выбрав его и наведя мышкой на изображение, вы должны увидеть круглую область вместо курсора. Если этого не произошло, нажмите Caps Lock на клавиатуре, и она обязательно появится. Размер области (штампа, кисти) и ее «мягкость» (размытость краев) можно настроить в верхнем меню:



    (инструмент Clone Stamp Tool должен быть активным, т.е. выбранным).
    Итак, размер кисти (в нашем случае штампа) настроен. Теперь необходимо «взять образец грунта» с одного места изображения. Зажимаем Alt, при этом курсор сменяется с круглой области на «прицел» и кликаем мышкой в том месте, откуда хотим взять «пробу». Отпускаем Alt-«прицел», и кликаем мышкой туда, где этой «пробой» необходимо замазать шов. Путем неоднократных действий со штампом можно закрасить незначительные остатки видимых швов. Еще раз повторюсь: все ваши действия не должны касаться краев изображения в документе, поэтому особо аккуратно работайте с инструментом Clone Stamp Tool, а также следите за тем, чтобы вставленные монетки-«заплатки» не выходили (в идеале, не касались) за края документа.

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



    Сохраните ее в формате JPG для дальнейшего использования в вашем веб-дизайне.
    Вы скажете: она ничем особо не отличается от предыдущей картинки, которой мы пытались замостить фон? Так то оно так, но…
    Теперь если мы попытаемся это сделать, у нас получится вот что:



    Швы магическим образом исчезли! Что нам и требовалось. И это не фокус. Это сделали мы с вами своими руками.

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

    P.S. Если у вас в процессе работы, что-то не будет получаться, пишите, я помогу.
     
    Последнее редактирование модератором: 6 авг 2010
  2. kik11

    kik11 Новичок

    Сообщения:
    369
    Симпатии:
    15
    Баллы:
    0
    Ответ: Оригинальный бесшовный фон для вашего сайта.

    artik69, к сожалению не грузятся три последние картинки. Очень бы хотелось увидеть последние эффекты.
    Извините! На третий раз прогрузились! Очень интересная статья!
     
    Последнее редактирование модератором: 5 авг 2010
  3. artik69

    artik69 Новичок

    Сообщения:
    163
    Симпатии:
    12
    Баллы:
    0
    Ответ: Оригинальный бесшовный фон для вашего сайта.

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

    DarkAngel Новичок

    Сообщения:
    2.908
    Симпатии:
    45
    Баллы:
    0
    Переместил тему в новый подраздел!
     
  5. dik

    dik Новичок

    Сообщения:
    93
    Симпатии:
    0
    Баллы:
    0
    Ответ: Урок №3: Оригинальный бесшовный фон для вашего сайта.

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

    КотофейкО Новичок

    Сообщения:
    2
    Симпатии:
    0
    Баллы:
    0
    Ответ: Урок №3: Оригинальный бесшовный фон для вашего сайта.

    Спасибо большое за урок! Очень часто сталкивалась с этой проблемой раньше и, как сказали выше:

    Еще раз спасибо!
    P.S. Две картинки не отобржаются. Не знаю, может это у меня так. Ниже я прицитировала фразы, после которых картинок нет:
     
  7. artik69

    artik69 Новичок

    Сообщения:
    163
    Симпатии:
    12
    Баллы:
    0
    Ответ: Урок №3: Оригинальный бесшовный фон для вашего сайта.

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