Показаны сообщения с ярлыком Уроки Блоггер. Показать все сообщения
Показаны сообщения с ярлыком Уроки Блоггер. Показать все сообщения

воскресенье, 31 марта 2013 г.

Весенний дизайн и технические советы по блогу


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


Долго думать над основной темой не пришлось, у меня до сих пор перед глазами была сакура в ГУМе, когда мы с подругой снимали "Один мой день в городских джунглях".

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

Зато "не повезло" конфетке:)) В отличие от уроков Blogspot, она попала под горячую руку и получила новый весенний баннер:))


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

Теперь о важном: на прошлой неделе, зайдя в статистику GoogleAnalytics я впервые посмотрела с каким разрешением экрана, в основном, заходят люди в мой блог. Оказалось, что почти 60% имеют разрешение 768х1024, а у меня ширина блога была около 1200, то есть у этих людей появлялась полоса прокрутки, что очень неудобно, о чем явно говорил показатель отказов (сколько людей сразу уходят с сайта), который был аж на 30% выше, чем на других разрешениях экрана. Получается, я со своим широкоформатником думала только о себе.

В срочном порядке бросилась делать новую шапку блога (эх, если б я тогда знала, что через неделю мне приспичит рисовать весеннюю:))) После изменения ширины обнаружила, что перестали влезать работы в каталоге. Рассчитала новую ширину и изменила, очень хотелось, чтобы влезало по 4 работы, как на ЯМ, а не по 3. В уроках по созданию каталога своих работ в блоге и оформлению его в стиле Ярмарки мастеров, используйте ширину рассчитанную под ваш блог.

Ширину блога удобно иметь такой, чтобы влезали изображения формата "очень крупный", который предлагает Blogger, когда мы добавляем изображения, + около 200 пикселей на боковую панель. Сейчас у меня ширина шапки блога 950px.

В общем, имейте ввиду такие нюансы. Надеюсь, эта информация пригодится!

Ну вот, так и выходит, если весна к нам не идет - мы создаем её сами:)) Никогда не думала, что захочу гламурно розовых оттенков))) Чертова зима, если она еще задержится, то я и на ярко-оранжево-красные перейду... А как вы боретесь с вечной зимой?:)))

четверг, 21 февраля 2013 г.

Как создать собственные кнопки и меню блога

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

  • Как создать собственные кнопки
  • Как добавить элемент HTML/JavaScript
  • Как объединить кнопки в меню блога

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

Накопилось уже три урока блоговедения: каталог своих работ в блоге, фото в рамочке для каталога и меню блога, - значит, они заслужили отдельную страничку:) Поэтому сегодня в качестве примера создания кнопки меню я буду создавать кнопку для "Уроков Blogspot".

Открываем Photoshop, выбираем Файл->Создать:



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


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


Таким же образом создаем остальные элементы будущего меню. Осталось их собрать вместе и добавить в блог. Для этого создаем новое сообщение, добавляем в нем совершенно как обычно (как будто пишем пост в блог) свои кнопки, компонуем их, пока не удовлетворимся результатом. При добавлении созданных нами картинок, не забываем выбирать "исходный размер". После чего на каждую кнопку ставим ссылку. Как это сделать, не заходя в html-код, рассмотрено в уроке создания каталога.




Переходим в режим HTML:


Копируем весь код. Открываем настройки Blogger, вкладка Дизайн:


Нажимаем "Добавить гаджет" (все нужное выделила красными овалами). Открывается следующее диалоговое окно:


Поле "Название" оставляем пустым, а в поле "Содержание" вставляем скопированный код нашего меню. Пост, в которой мы компоновали свое меню, сохраняем как черновик и никогда не публикуем:))) Когда нам понадобится что-то изменить в меню, мы просто зайдем в свой черновик и внесем нужные изменения в режиме дизайна, а не копаясь в коде html.

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

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

пятница, 15 февраля 2013 г.

Как сделать квадратную миниатюру в рамке для каталога в блоге

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

Есть два способа сделать фотографии в своем каталоге похожими на магазин Ярмарки Мастеров (или Etsy)

1. Самый простой способ (сейчас вы будете смеяться). Заходим в свой магазин на ЯМ, нажимаем правой кнопкой мыши на нужную нам работу, выбираем "Сохранить изображение как..." и сохраняем картинку себе на компьютер:

После чего можем сразу же использовать ее для создания каталога в блоге:)))


Ну как - посмеялись?:))

2.  Теперь перейдем к более сложному способу, в случае если: 
  • нет магазина на ЯМ.
  • на ЯМ эта работа не выложена (а в архиве каталога она должна быть). 
  • всё есть, но мы хотим такую же рамочку как на ЯМ (в первом способе рамочка не сохраняется, только само изображение).
Открываем нужное фото в Photoshop, выбираем инструмент Рамка:

Инструмент Рамка в фотошопе

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

Кадрирование в фотошопе

Чтобы обрезать изображение до выделенного размера, нажимаем правую кнопку мыши на выделенном участке и выбираем в контекстном меню "Рамка":

Кадрирование в фотошопе

Все лишнее отрезалось. Теперь нам нужно изменить размер изображения: выбираем в меню Изображение->Размер изображения:

Изменить размер изображения в фотошопе

Ставим ширину и высоту 175 пикселей. Именно такого размера изображения на ЯМ, которые мы сохраняли в первом способе. Если нам нужен другой размер - меняем его в этом окошке.

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

Выбираем в меню: Изображение->Размер холста:

Как сделать рамку в фотошопе

Выбираем измерение в пикселях, а не в сантиметрах, которые стоят по умолчанию, меняем ширину и высоту холста на 2 пикселя: либо прибавляем к 175, либо ставим галочку "относительная" и ставим 2 пикселя. Это даст нам рамочку толщиной в один пиксель с каждой стороны (1+1 = 2:))

Меняем цвет рамки, для этого просто кликаем по квадратику напротив "цвет расширения холста", откроется палитра цветов:

Цвет рамки в фотошопе

Выбираем цвет либо прямо на палитре, либо вводим нужные цифры в RGB: например 180, 180, 180. Получаем серую рамочку:

Теперь можем вставлять в свой каталог, при вставке в блог используем "исходный размер", а иначе зачем мы так старались?:))

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

Все вопросы оставляйте в комментариях, и не забывайте хвалиться вашими каталогами:)))

вторник, 12 февраля 2013 г.

Как сделать каталог работ с фотографиями в блоге

Сегодня рассмотрим как сделать интерактивный каталог своих работ с фотографиями и ссылками на посты в блоге. 

У каждой рукодельницы наступает момент, когда работ становится приличное количество и их хочется как-то наглядно структурировать: не каждый заводит магазин на Ярмарке Мастеров, не каждый держит в нем все свои работы (за количество же платить надо), и, что еще немаловажно, - посты, посвященные своим любимым работам, на написание которых потрачено немало времени, канули в лету, и мало кто из читателей будет рыться в архиве. Знакомо?:)

Поэтому мы сделаем интерактивный каталог, который будет одновременно наглядным магазином актуальных работ и архивом любимых постов:)

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

Создаем новую страницу "Каталог":

Как создать страницу в блоге
 
На новой созданной странице "Каталог" переходим в режим HTML 

режим html

и вставляем следующий код:

<!---------------------------------   Начало таблицы готовых работ    --------------------------------->
<table>
<tbody>
<!--------------------   первый ряд   -------------------->
<tr>
<td>1.1. Блог. ЯМ.</td>
<td>1.2. Блог. ЯМ.</td>
<td>1.3. Блог. ЯМ.</td>
</tr>
<!--------------------   второй ряд   --------------------->
<tr>
<td>2.1. Блог. ЯМ.</td>
<td>2.2. Блог. ЯМ.</td>
<td>2.3. Блог. ЯМ.</td>
</tr>
</tbody>
</table>
<!---------------------------------   Конец таблицы готовых работ    ---------------------------------->

То, что находится между знаками "<!-- ... -->" является html-комментариями и никак не влияет на код, но очень поможет нам для наглядности, когда таблица будет большой.

Если хотим добавить новый столбец в определенном ряду, просто вставляем новую строчку <td>Блог. ЯМ.</td>. 
Если хотим добавить новый ряд, то копируем все, что между комментариями "первый ряд" и "второй ряд".

Возвращаемся в режим "Создать" и видим: 


Теперь наполняем наш каталог:

Вставляем картинки наших работ, поставив курсор перед цифрами, обозначающими номер ряда и столбца:  
Вместо цифр пишем название (я пишу только обозначение работы: колье/серьги/браслет и т.п). На слово "блог" ставим ссылку на пост, посвященный этой работе. На слово "ЯМ" - ссылку на эту работу на Ярмарке Мастеров (если там имеется магазин):
Само фото делаем кликабельным: на него тоже ставим ссылку (многие привыкли к каталогам в интернет-магазинах, где щелчок по фото приводит к открытию выбранной работы). Как поставить ссылку на фото в блоге? Да очень просто:) Делаем дважды следующее: кликаем на картинку, жмем на "ссылку":

как сделать фото кликабельным

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


Выравниваем везде фото и текст по центру. Получаем, например, следующее:

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

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

Update: Второй урок - "Как сделать квадратную миниатюру в рамке", если очень хочется, чтобы каталог был похож на Ярмарку Мастеров:)

Буду рада увидеть ваши каталоги:)
Related Posts Plugin for WordPress, Blogger...