Дизайн блога: мастер-класс от профессионала

Автор , 29.05.2011,

Ольга Москалец Приветствую всех читателей блога! С огромным удовольствием представляю вам сегодняшнюю гостью: это профессиональный художник и дизайнер Ольга Москалец. Познакомились мы за одной партой в Школе интернет-бизнеса RWT и с тех пор Ольга не устаёт удивлять и восхищать меня тонким проникновением в дух природы, безукоризненным чувством гармонии и стиля, и филигранной игрой на линиях, тонах и тенях.  Каждый батик ручной работы в исполнении Ольги словно оживает, сохраняя в себе частичку души своего создателя. А блог Батик и дизайн Ольги Москалец позволяет полностью погрузиться в атмосферу творческой мастерской художника, найти на нём отдохновение от безостановочной интернетной гонки за синей птицей.

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

* * *

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

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

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

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

И уж как не крути, если вы серьезно решили заняться блоггингом – вам надо каким-то образом создавать индивидуальность.

Есть два пути. Первый – проще и эффективней, но требует материальных затрат. Заказать дизайн у профессионалов. Чтобы не ошибиться в выборе – посмотрите действующие проекты этих специалистов.
Но, как вы понимаете, хороший дизайн стоит хороших денег.

Путь второй – сложней и дольше. Требует наличие времени. Его плюсы – знания никогда не бывают лишними! И сделав один раз – вы можете менять дизайн блога снова и снова…

Переходя по ссылке на какой-либо сайт первое, что вы видите – это шапка. Вот с ней-то мы и поколдуем… Не пугайтесь, я тоже не люблю забираться в HTML и с ужасом наблюдать в админке розоватенькую панель с надписью ERROR!!!

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

ноут Итак –шапка. Дизайн блога должен поддерживать тематику ваших статей. Рассмотрим шапку на примере блога Евгения – тематика ХХ1 век, компьютер…

Создадим у себя на компьютере папку «Мой дизайн». Скопируем папку «Images» из нашего шаблона во вновь созданную папку. Картинку шапки откроем через правую кнопку мыши с помощью Фотошопа. Сразу создадим дубликат( меню «Изображение»- создать дубликат).

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

дизайн_блога_01

дизайн_блога_02

Откроем файл с изображением ноутбука(на прозрачном фоне) и инструментом «перемещение» перетянем ноутбук на шапку.

дизайн_блога_03

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

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

дизайн_блога_05

Открыв еще одну картинку, выделим желаемый фрагмент инструментом «прямоугольная область». Инструментом «Перемещение» отправим на шапку. Отмасштабируем тем же способом, что и ноутбук. Размножила небоскребы теми же шагами. Выделив фрагмент «прямоугольной областью» и  перейдя на инструмент «перемещение» с зажатой «Alt» перетянула дубликаты на новые места.

Поскольку такие яркие небоскребы просто лишат возможность прочитать заголовок, мы их приглушим, сделав прозрачными. К тому же сохраним таким цветовую гамму.  Для этого на панели слоев присмотримся на слой с небоскребами. Нажав на нем правой кнопкой мыши выберем меню «Параметры наложения». Откроется окошко как на скриншоте. Установим прозрачность на 24%.

дизайн_блога_04

Возможно после того, как на шапке появится текст, вы захотите еще ее отредактировать. Для такой возможности сохраняем файл в формате Фотошопа. А для применения на блоге – сохраняем в формате JPEG. И через меню «Файл» — сохранить для WEB и устройств сохраняем под тем же именем, что и в шаблоне в папку «Мой дизайн»

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

Посмотрев на блоге результат, можно :
1.    Остаться довольным;
2.    Отредактировать еще, вернувшись в Фотошоп;
3.    Вернуть начальное изображение.

Успехов в творчестве!

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

* * *
Понравилось? Нажмите на кнопки для своих социальных сетей!
Заинтересовало? Прокомментируйте, что думаете по этому поводу!
Будьте первыми в курсе новинок блога, подпишитесь на обновления по E-Mail.

,

44 комментария “Дизайн блога: мастер-класс от профессионала”

  1. Оля, прекрасно! Так просто, буквально на пальцах вы расписали пошаговые действия по преобразованию шапки своего блога, что не возможно, чтобы у кого-либо это не получилось.
    Ну а Евгению, как обычно, респект за отличную работу! Женя, поделитесь пожалуйста своими планами. Кто на очереди у вас в гостях?

    • Лариса, спасибо!
      Иногда сложно представить как лучше подать то, что для меня элементарно, а кто-то с этим вообще не сталкивался. Быть учителем — это талант от Бога. Я не чувствую себя на этом поприще как рыба в воде. Но разнообразие в деятельности тоже интересно!

    • Лариса, в блогосфере очень много ярких, созидательных имён, которых я рад видеть у себя в гостях. Гостевая рубрика обязательно будет расширяться.

  2. Спасибо Оле и Евгению! Как раз мучаюсь этим вопросом. Набрела на очень похожий блог и расстроилась — как близнецы-братья получились. Вот и думаю, как изменить, что предпринять. А тут как раз ваша статья. Прямо мысли мои материализовались. Пойду помучаю фотошоп.
    Еще раз, спасибо!

  3. Для меня фотошоп очень нужная программа! Уже почти на ты…по-крайней мере, элементарно поработать с графикой, а то и фотографии свои любительские обработать, знаний хватает.Но постоянно изучаю новые методы и более продвинутые возможности этой программы.И не перестаю ей восхищаться.А шапку блога так и делала…индивидуальную.А вот блог Ольги-интересно,познавательно и море эмоций от просмотра её творений.Вот умеют же люди! Здорово,Ольга!

  4. Евгений и Оля, спасибо за полезную информацию! К Фотошопу я всё только подступаюсь, Оля показала, что не так страшен чёрт, как его малюют — научусь и я !

  5. Евгений, спасибо за такое представление! Действительно рада погостить у вас.

  6. Отличный урок. Грамонтно и без воды. Уникальности необходимо добиваться всегда.

  7. Хочу выразить свое искреннее восхищение Ольге за прекрасный урок! И конечно — благодарность Евгению за замечательный материал на его сайте. Спасибо Вам огромное, Я тстоль кому у Вас обоих учусь и буду учиться!

  8. Я, конечно, меняла шапку своего блога, но делала это давно, методом «тыка». Урок очень хорош, все доступно. Спасибо, ребята! Очень рекомендую Вам, Оля, почаще давать уроки и тогда точно почувствуете себя рыбкой. Евгений, как всегда, нашел очень интересного, творческого человека. Ретвит.

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

  9. Спасибо за статью!
    На данный момент я занимаюсь возобновлением сайтов на вордпрессе.
    И данная информация для меня очень актуальна!
    Здорово, когда «шапку» монтируешь сам …а не просто через вырезку фрагмента из большой фотографии!

    Очень интересное наблюдение сделано мной, относительно функциональных опций админ-панели вордпресса.
    Оказывается в разных шаблонах фукционал панели различен….
    Так например, в одной теме я легко вставила изображение новой шапки через встроенную функцию админ-панели, а когда решила эту тему поменять…. то так же лихо у меня не получилось! Опции загрузки новой шапки напрямую ….не было! И концовка статьи — как раз мне на поддержку!….буду делать!
    Куда писать вопросы, если что-то не стыкуется???
    С уважением,Ольга

  10. Огромное спасибо авторам! Главное — в мою тему:-) Делаю дизайн для своего нового блога. Но шапка — это только начало…
    А продолжения будут?

    Пока посмотрю на конструктор WP без стресса ужаса от чтения других рассылок:-)

    Ольга, Евгений! Еще раз спасибо и успехов нам!

  11. Спасибо, побегу шапку рисовать)

  12. Спасибо очень доступный урок.

  13. Очень все понятно и доступно) Обязательно займусь шапкой своего блога

  14. Браво, Ольга.Я в восторге — столько полезностей, можно сказать, всего в «несколько строк».Спасибо и Вам, Евгений.

  15. Однако мне это нравится, оказывается и не так сложно, попробую сейчас же. Спасибо.

  16. Вот спасибо огромное! Создала новый сайт, а шаблон хороший выбрать не могу. Теперь смогу сама сделать то, что хочу уже давно.

  17. Ромуальд Заборов:

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

    • Согласен с Вами, что пустопорожних сайтов-«конфеток» развелось очень много, поисковые системы не успевают их отлавливать и «ронять» в выдаче.
      А вообще-то, принцип «встречают по одёжке» жил, жив и будет жить. Так что, если сайт интересен не только по содержанию, но и по форме, то это, полагаю, абсолютно нормально и правильно.

  18. Себастьян Перейро:

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

  19. Иосиф Бродский:

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

    • Чем плохо, если каждый человек станет заниматься своим делом? Воспитатель будет воспитывать, строитель — строить, а дизайнер — проектировать сайты?

А Вы что думаете по этому поводу?

XXI век is powered by WordPress. OfficeFolders based theme by Themocracy