Дизайн блога: мастер-класс от профессионала
Приветствую всех читателей блога! С огромным удовольствием представляю вам сегодняшнюю гостью: это профессиональный художник и дизайнер Ольга Москалец. Познакомились мы за одной партой в Школе интернет-бизнеса RWT и с тех пор Ольга не устаёт удивлять и восхищать меня тонким проникновением в дух природы, безукоризненным чувством гармонии и стиля, и филигранной игрой на линиях, тонах и тенях. Каждый батик ручной работы в исполнении Ольги словно оживает, сохраняя в себе частичку души своего создателя. А блог Батик и дизайн Ольги Москалец позволяет полностью погрузиться в атмосферу творческой мастерской художника, найти на нём отдохновение от безостановочной интернетной гонки за синей птицей.
Сегодня Ольга любезно согласилась дать мастер-класс по созданию уникального дизайна блога своими собственными руками. Для примера выбран блог на платформе WordPress, однако общие принципы, подход к уникализации останется точно таким же и на Blogger. Итак, слово нашей гостье:
* * *
Среди бесплатных шаблонов для WP много таких, которые являются почти универсальными. То есть они подходят почти под любую тематику блога. Это происходит вследствие отсутствия каких-либо изображений фона или шапки, явно ассоциирующихся с чем-то определенным.
Вооружившись таким шаблоном и тематикой сайта «обо всем сразу» вы вольетесь в миллионные ряды блоггеров, которые с каждым днем пополняются такими же клонами. И через месяц удивляются почему их никто не читает…
Дизайн, конечно же, не может быть сам по себе. Он эффективно работает и приносит результат только после того, когда есть основное. А основное – это тематика ваших публикаций. Обрежьте ее с необъятной «обо всем» до «в этом я компетентен и эту информацию ищут в поисковиках».
И только после этого посмотрите на дизайн блога. Представьте, что вы не автор, а именно тот читатель, который пришел через поиск. Поскольку ваш блог молодой, то он не первый, куда пришел этот читатель. И перед ним опять такой же шаблон, как и у предыдущих и те же картинки из поисковиков… Будете читать? Вряд ли…
И уж как не крути, если вы серьезно решили заняться блоггингом – вам надо каким-то образом создавать индивидуальность.
Есть два пути. Первый – проще и эффективней, но требует материальных затрат. Заказать дизайн у профессионалов. Чтобы не ошибиться в выборе – посмотрите действующие проекты этих специалистов.
Но, как вы понимаете, хороший дизайн стоит хороших денег.
Путь второй – сложней и дольше. Требует наличие времени. Его плюсы – знания никогда не бывают лишними! И сделав один раз – вы можете менять дизайн блога снова и снова…
Переходя по ссылке на какой-либо сайт первое, что вы видите – это шапка. Вот с ней-то мы и поколдуем… Не пугайтесь, я тоже не люблю забираться в HTML и с ужасом наблюдать в админке розоватенькую панель с надписью ERROR!!!
Единственное, что вам необходимо совершить глобальное – это установить Фотошоп. Вот здесь прийдется преодолеть свои страхи и понять, что программу для профессионалов можно так же использовать и поверхностно. Постепенно научившись набору простых действий, у вас отпадет проблема с поиском картинок…
Итак –шапка. Дизайн блога должен поддерживать тематику ваших статей. Рассмотрим шапку на примере блога Евгения – тематика ХХ1 век, компьютер…
Создадим у себя на компьютере папку «Мой дизайн». Скопируем папку «Images» из нашего шаблона во вновь созданную папку. Картинку шапки откроем через правую кнопку мыши с помощью Фотошопа. Сразу создадим дубликат( меню «Изображение»- создать дубликат).
Для начала уберем изображение с фона. Выделив кусок фона инструментом «Прямоугольная область», перейдем на инструмент «Перемещение». Зажав клавишу «Alt», накроем изображение дублированным кусочком фона.
Откроем файл с изображением ноутбука(на прозрачном фоне) и инструментом «перемещение» перетянем ноутбук на шапку.
В меню «Редактирование» выберем «Трансформирование» — масштабирование. Появится панель, где можно изменить масштаб до необходимого.
Чтобы еще активней преобразовать дизайн блога, добавим к фону шапки немного небоскребов.
Открыв еще одну картинку, выделим желаемый фрагмент инструментом «прямоугольная область». Инструментом «Перемещение» отправим на шапку. Отмасштабируем тем же способом, что и ноутбук. Размножила небоскребы теми же шагами. Выделив фрагмент «прямоугольной областью» и перейдя на инструмент «перемещение» с зажатой «Alt» перетянула дубликаты на новые места.
Поскольку такие яркие небоскребы просто лишат возможность прочитать заголовок, мы их приглушим, сделав прозрачными. К тому же сохраним таким цветовую гамму. Для этого на панели слоев присмотримся на слой с небоскребами. Нажав на нем правой кнопкой мыши выберем меню «Параметры наложения». Откроется окошко как на скриншоте. Установим прозрачность на 24%.
Возможно после того, как на шапке появится текст, вы захотите еще ее отредактировать. Для такой возможности сохраняем файл в формате Фотошопа. А для применения на блоге – сохраняем в формате JPEG. И через меню «Файл» — сохранить для WEB и устройств сохраняем под тем же именем, что и в шаблоне в папку «Мой дизайн»
Обязательно сделайте архив БД, а затем зайдя на хостинг, закачайте в папку «Images» вашего шаблона новую картинку шапки. Когда появится вопрос : заменить имеющийся файл – значит вы все делаете правильно – соглашайтесь на замену.
Посмотрев на блоге результат, можно :
1. Остаться довольным;
2. Отредактировать еще, вернувшись в Фотошоп;
3. Вернуть начальное изображение.
Успехов в творчестве!
* * *
Понравилось? Нажмите на кнопки для своих социальных сетей!
Заинтересовало? Напишите, что думаете по этому поводу!
Будьте первыми в курсе новинок блога, подпишитесь на обновления по E-mail.
Оля, прекрасно! Так просто, буквально на пальцах вы расписали пошаговые действия по преобразованию шапки своего блога, что не возможно, чтобы у кого-либо это не получилось.
Ну а Евгению, как обычно, респект за отличную работу! Женя, поделитесь пожалуйста своими планами. Кто на очереди у вас в гостях?
Лариса, спасибо!
Иногда сложно представить как лучше подать то, что для меня элементарно, а кто-то с этим вообще не сталкивался. Быть учителем — это талант от Бога. Я не чувствую себя на этом поприще как рыба в воде. Но разнообразие в деятельности тоже интересно!
Лариса, в блогосфере очень много ярких, созидательных имён, которых я рад видеть у себя в гостях. Гостевая рубрика обязательно будет расширяться.
Спасибо Оле и Евгению! Как раз мучаюсь этим вопросом. Набрела на очень похожий блог и расстроилась — как близнецы-братья получились. Вот и думаю, как изменить, что предпринять. А тут как раз ваша статья. Прямо мысли мои материализовались. Пойду помучаю фотошоп.
Еще раз, спасибо!
Светлана, понимаю вас. Сама расстраиваюсь, если встречаю где дубли.
А я теперь попал в ловушку Ольгиной креативности: теперь, если я изменю «шапку». она уже не будет живой иллюстрацией к этой статье :-)))
Для меня фотошоп очень нужная программа! Уже почти на ты…по-крайней мере, элементарно поработать с графикой, а то и фотографии свои любительские обработать, знаний хватает.Но постоянно изучаю новые методы и более продвинутые возможности этой программы.И не перестаю ей восхищаться.А шапку блога так и делала…индивидуальную.А вот блог Ольги-интересно,познавательно и море эмоций от просмотра её творений.Вот умеют же люди! Здорово,Ольга!
Галина, спасибо за эмоции! Мне приятно, что мои работы не оставили вас равнодушной.
Евгений и Оля, спасибо за полезную информацию! К Фотошопу я всё только подступаюсь, Оля показала, что не так страшен чёрт, как его малюют — научусь и я !
Совсем не страшен, Елена! Главное переступить этот свой страх. И если что — спрашивайте. Всегда рада помочь своим «одноклассникам»…
Евгений, спасибо за такое представление! Действительно рада погостить у вас.
Для меня это было сплошное удовольствие )
Отличный урок. Грамонтно и без воды. Уникальности необходимо добиваться всегда.
Да, особенно когда это на поверку не так уж и сложно.
Хочу выразить свое искреннее восхищение Ольге за прекрасный урок! И конечно — благодарность Евгению за замечательный материал на его сайте. Спасибо Вам огромное, Я тстоль кому у Вас обоих учусь и буду учиться!
Спасибо, Елена. Взаимное обогащение знаниями, навыками, технологиями и идеями очень важно.
Елена, а мне приятно, что вы всегда одна из первых, кто поддерживает… :)
Я, конечно, меняла шапку своего блога, но делала это давно, методом «тыка». Урок очень хорош, все доступно. Спасибо, ребята! Очень рекомендую Вам, Оля, почаще давать уроки и тогда точно почувствуете себя рыбкой. Евгений, как всегда, нашел очень интересного, творческого человека. Ретвит.
Спасибо, Раиса, за совет! Сейчас потихоньку выкладываю уроки по батику на своем блоге. Все-таки с росписью я работаю больше, нежели с графическим дизайном.
Спасибо за статью!
На данный момент я занимаюсь возобновлением сайтов на вордпрессе.
И данная информация для меня очень актуальна!
Здорово, когда «шапку» монтируешь сам …а не просто через вырезку фрагмента из большой фотографии!
Очень интересное наблюдение сделано мной, относительно функциональных опций админ-панели вордпресса.
Оказывается в разных шаблонах фукционал панели различен….
Так например, в одной теме я легко вставила изображение новой шапки через встроенную функцию админ-панели, а когда решила эту тему поменять…. то так же лихо у меня не получилось! Опции загрузки новой шапки напрямую ….не было! И концовка статьи — как раз мне на поддержку!….буду делать!
Куда писать вопросы, если что-то не стыкуется???
С уважением,Ольга
Я тоже заметил, что разные темы WordPress добавляют свои опции в админку и могут сильно отличаться друг от друга.
Ольга,если вопросы по дизайну — пишите у меня на блоге в комментариях. А если по настройкам WP — не уверена что во всем смогу помочь…
Огромное спасибо авторам! Главное — в мою тему:-) Делаю дизайн для своего нового блога. Но шапка — это только начало…
А продолжения будут?
Пока посмотрю на конструктор WP без стресса ужаса от чтения других рассылок:-)
Ольга, Евгений! Еще раз спасибо и успехов нам!
Тамара!
В моих планах собрать дизайн вообще с нуля.Надеюсь, что смогу найти на это время. Будет практика и знания — появится желание поделиться этими знаниями…
С Вашим талантом у Вас обязательно получится!
Батик Ваш необыкновенен, как и сайт, на котором о нем рассказываете.
Успехов!!!
Спасибо, Тамара, за прекрасные слова!
Спасибо, побегу шапку рисовать)
Я сначала тоже было дёрнулся. Но теперь выходит, что стандартная «шапка» — это иллюстрация к этой статье. Как же её теперь трогать? :-)
Евгений, можно скрин сделать с подписью «было так»,,, :)
Ну теперь уже всё, привык, она как родная )
Спасибо очень доступный урок.
Очень все понятно и доступно) Обязательно займусь шапкой своего блога
Стало быть, цель публикации достигнута )
Браво, Ольга.Я в восторге — столько полезностей, можно сказать, всего в «несколько строк».Спасибо и Вам, Евгений.
Мы рады, что публикация оказалась Вам полезна!
Однако мне это нравится, оказывается и не так сложно, попробую сейчас же. Спасибо.
Успехов! Похвастайтесь потом, что у Вас получилось.
Вот спасибо огромное! Создала новый сайт, а шаблон хороший выбрать не могу. Теперь смогу сама сделать то, что хочу уже давно.
Как я понимаю, у Вас всё получилось?!
Безусловно, в наше время, когда внешность важнее содержания, дизайн и «отделка» блога или сайта играет едва ли не более важную роль, нежели их наполнение. Идиотизм крепчает и множится
Согласен с Вами, что пустопорожних сайтов-«конфеток» развелось очень много, поисковые системы не успевают их отлавливать и «ронять» в выдаче.
А вообще-то, принцип «встречают по одёжке» жил, жив и будет жить. Так что, если сайт интересен не только по содержанию, но и по форме, то это, полагаю, абсолютно нормально и правильно.
В наш показушный век внешний антураж имеет едва ли не более важное значение чем смысловое содержание. Поэтому данная статья будет очень полезна и информативна
Встречают в любом случае всегда по одёжке, поэтому — да, считаю статью и полезной и информативной.
Вот основная цель каждого современного цивилизованного человека — разработать уникальный и привлекательный дизайн блога. Не воспитать детей, не построить дом, не посадить дерево. Именно дизайн блога, всё остальное — несущественно
Чем плохо, если каждый человек станет заниматься своим делом? Воспитатель будет воспитывать, строитель — строить, а дизайнер — проектировать сайты?