W.Yon

персональный урок Дизайн для дневника

1. Создание Эпиграфа

Эпиграф - это картинка, с текстом, размером приблизительно 700*400, 600*400, 500*300 пикселей в зависимости от сервера где расположен ваш дневник. Эпиграф ставится обычно вверху всего дневника, как бы центральная картинка

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

Я применила колорку и написала текст

Вот что у меня получилось

2. Если картинки две и более, и их надо совместить, тогда тут подойдет урок Красивый коллаж или Создание комплекта

Я совместила две картинки в одну, немного поиграла с цветом, написала текст

2. Создание фона

Тут можно воспользоваться уроком по созданию фонов (урок по изготовлению фона был тут. Или сделать фон по новому уроку"Колейдоскоп"

Выбираем на картинке фрагмен из которого будем делать наш фон

Берем инструмент "рамка" (С), находится на панеле инструментов слева, задаем параметры чтоб квадратик был ровный

и вырезаем фрагмент

Теперь поворачиваем наш фрагмент на 45 градусов.
Для этого идем в Image-Rotate canvas-Arbitrary (Изображение-Повернуть холст-Произвольно) и ставим так

Нам весь получившийся ромбик не нужен. Наш фон мы будем формировать только из одной четвертинки этого ромбика. Поэтому опять берем инструмент (РАМКА)Crop, зажимаем Shift и делаем обрезку

Подготовительные работы закончены.

Начинаем склеивать наш фон. Увеличиваем ширину холста вдвое. Идем Image-Canvas size (Изображение-Размер холста) и устанавливаем такие настройки

получаем

Удваиваем треугольник. Дублируем слой Layer-Dublicate layer (Слой-Дублировать слой). Полученный новый слой отражаем по горизонтали Edit-Transform-Flip it Horizontally (Редактирование-Трансформирование-Отразить по горизонтали) и сдвигаем стрелочкой так, чтобы получилось такое

Объединяем эти два слоя (Ctrl+E).

Увеличиваем высоту холста вдвое.

Дублируем слой и опять отражаем копию, но теперь уже по вертикали.

Объединяем эти два слоя (Ctrl+E).

Снова дублируем слой. И поворачиваем копию "бантика" на 90 градусов. Для этого идем Edit-Transform-Rotate 90 (Редактирование-Трансформирование-Поворот на 90). Здесь не важно будете вы поворачивать по часовой стрелке или против неё.

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

а вот со второй картинкой

3. Аватара

Ну с этим все проще некуда вырезаем стандартный аватар 120*120, ну и я еще колор сделала

Дизайн для дневника готов

W.Yon
это как тебе будет удобнее, хоть каждый элемент отдельно, хоть все вместе

Hiyori
скоро будет и для тебя перс задание.

каждому после 5 задания будут персональные уроки

Катрин
тут немного видна пиксельность тут либо радикал испортил качество либо вес слишком велик.

Можно просто сделать аватар меньше по размеру. Анимация хорошо смотрится при небольшом количестве кадров или на изображениях 100*100 или 120*120

попробуй если у тебя сохранился псд файл удалить на нем дополнительные кадры через один, уменьшить размер и после этого уже сохранять

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

Катрин

А тебе простая анимация

бабочка махает крыльями"

1.)Открываем фотошоп и создаем новый документ 200*200

рисуем там кисточкой бабочку
Я использовала вот такую кисть кисть бабочка

Вообщем вот такая бабочка у меня вышла

2).теперь нам надо заставить ее махать крыльями.
Слева есть область инструментов выбираем прямоугольный инструмент как на рисунке:

и выделяем одну часть крыла бабочки не захватывая ее туловища. И нажимаем скопировать на новый слой. Примерно так.

тоже самое проделываем со вторым крылом,
Потом точно так же на новый слоу копируем только туловище бабочки.
У нас получилось 4 слоя
1. наша оригинальная бабочка
2. копия с первым крылом
3. копия со вторым крылом
4. и тельце бабочки
3).берем наш первый слой с крылом. Убедимся что мы стоит на нем
Идем в Редактировать ---- Трансформирование ------ Искажение

и сжимаем наше крыло на чуть чуть в сторону тела
тоже самое проделываем с другим крылом
4).копируем наше первое и второе сжатое крыло по 2 раза каждое

И сжимаем как предедущие в сторону тела. Проделываем все тоже самое
Редактировать ---- Трансформирование ------ Искажение
После второго сжатия

после третьего сжатия

5). Теперь настало время Имедж Реади

Переходим туда. Выстраиваем кадры в таком порядке:
1 кадр – наш оригинальный 1 слой
2 кадр – наши первые слои со сжатыми крыльми бабочки + ее тело
3 кадр – наши вторые слои со сжатыми крыльми бабочки + ее тело
4 кадр – наши третьи слои со сжатыми крыльми бабочки + ее тело

Времени 0,1 сек вполне достаточно.

И теперь последнее чтобы переход был более плавный:
Копируем 3-кадр в конец анимации ставим нашу копию за 4-м кадром. И наш 2-й кадр за только что появившимся 5-м кадром.
У нас получилось 6 кадров
Теперь сохраняем как оптимизированный гиф и все готово

Вот мои бабочки

Теперь задание: нарисуйте любую бабочку и заставьте ее махать крыльями