Автор фото-статьи Петров Геннадий,

сайт "Подвижный в подвижном" http://pgs1958.net

return_links(1);?>

Если Вы задумали создать свой сайт, то Вы рано или поздно столкнетесь с проблемой создания фотогалереи , по теме сайта или в виде фото-статьи. Для этого существует много программ , причем бесплатных, в которых очень просто сделать фотогалерею для сайта. Алгоритм работы в них предельно прост, а именно: захватываем фото Вашего католога в окно программы, устанавливаем эффекты перехода между окрывающими фото (или автоматический режим включаем "использовать все эффеты"), выполняем команду "создать" или аналогичную и галлерея готова, далее выгружаем ее на хостинг сайта в корневой каталог сайта и в какой либо странице (или в меню Главной страницы) указываем ссылку на index.php или index.html Вашей галереи. return_links(1);?>

Но данные программы с целевым конечным продуктом , имеют, как правило, мало возможностей для творчества. Например, Вам необходимо к каждой фото написать текст и последовательно при смене фото на экране должен будет появлятся другой текст и тем самым Вы создадите фото - статью по тематике Вашего сайта . Таким методом , на сайте "Подвижный в подвижном"( http://pgs1958.net), в каталоге "Сделай сам", написаны все статьи. Например, статья "Бетон, бетон, бетон". Кроме того , Вам нужна программа, чтобы на выходе, при получении конечного продукта - фотогалереи, на всех страницах фотогалереи стоял логотип Вашего сайта, а не реклама. А реклама ,зачастую, в бесплатно распростроняемых программах присутствует, собственно для этого их бесплатно и распростроняют. Кроме того , Вам нужна "прога", в которой Вы смогли бы для каждой странички написать все тэги для раздела HEAD страницы HTML. Как там ни крути, а поисковик Яндекс на сегодня самый доминирующий в интернете и если фотогалерея не будет индексироваться роботами Яндекса , то Ваш труд никто не увидит.return_links();?>

И так мы рассмотрим интересную программу, небольшую по объему, бесплатно распростроняемую в интернете, но на взгляд автора данной статьи очень мощную по своим возможностям. Программа создает фотогалерею страниц формата HTML , но мы с Вами начинающие блогеры и нам выходные файлы HTML более понятны и более подходяд. Программа называется Wizard90, свободно распространяется в интернете , с пожеланием авторов о вознаграждении в добровольном порядке. Сайт программы , указан в программе http://www.b-zone.de.

Чтобы понять как работает программа , мы с Вами создадим фотогалерею и назовем ее " Примеры оцифровки фотографий". Для начала мы предварительно должны подготовить сами фотографии к публикации в интернете, а именно : "облегчить" их по весу, сделать красивую тень (можно и не делать), защитить свое авторское право на фото водяными знаками или надписями .

Что мы с Вами и сделаем на первом этапе нашей работы, для этого используем программу FastStone Photo Resizer 3.0 Алгоритм работы прост, захватываем наши фото , причем целый каталог, выставляем размер, делаем надпись, устанавиваем тень и выгружаем результат , в заренее указанный в данной программе наш каталог-приемник. И так смотрим , поэтапно:

I . Первый этап - оцифровка фотографий для будущей web - галереи

1. Открываем программу FastStone Photo Resizer 3.0 , значок её выглядит на рабочем столе так :

2. Через пиктограмму поиска программы находим каталог с фото которые мы будем загружать для обработки в данную программу. Чтобы сделать захват их в программу, нажимаем "ОК" (См.фото ниже)

 

3. Фотографии, выбранного каталога, загрузятся в левое окно программы. Правое окно программы - рабочее окно, нам нужно из нашего каталога перебросить фото в это рабочее окно. Чтобы переместить все фото жмем команду "Add Al" и все фото каталога переместятся в правое рабочее окно.(См. фото ниже) Можно из выбранного каталога выборочно перемещеть фото в рабочее окно программы . Для этого в левом окне мышкой указываем файл одного фото и нажимаем команду "Add", при этом способе захвата фото в программу переместится одно фото. Такм способом мы сможем в рабочее окно программы переместить не все фото каталога, а те что нам нужны для слайд шоу.

 

4. Далее, необходимо сделать важную процедуру в данной программе - указать каталог , куда будут записываться, оцифрованные в данной программе, фотографии. Мы заранее создали у себя на винте "E" каталог - "приемник" с названием "foto умен с защитой" Нажимаем кнопку команды "Browse"(справа внизу Cм. фото ниже), и слева в открывшемся окне указываем каталог-приемник и нажимаем "ОК" Если Вы не установите каталог- приемник, пропустите операцию, программа работать не будет и будет "по английски ругаться".

 

5. Далее, для фото в меню оцифровки фотографий жмем кнопку команды "Advanced Options" (справа внизу основного окна программы См.фото ниже)

 

6. Открывается меню оцифровки фото, меню имеет 10 вкладок и при открытии каждой вкладки открывается подменю, отвечающее за определенные операции по оцифровке фото, например, за изменение размера, написание надписи, нанесении водяного знака и т.п. Для "облегчения" наших фото по весу (в Кбайтах) нам нужна первое подменю "Resize" - изменение размера фото, мышкой устанавливаем галочку в этом подменю в окошке "Resize" (Cм.фото ниже)

 

 

7. Открывается меню команд вкладки по изменению размера фотографии. В программе имеются три режима изменения размеров фото.(Cм. фото ниже) Выставляем новый размер фото - 800х600 пикселей.

 

8. Предварительно можно посмотреть как изменятся наши фото после конвертации фото, жмем внизу меню иконку с "лупой" (Cм.фото ниже)

 

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

 

10. Далее нам необходимо защитить свое авторское право на публикуемые фото, как мы уже говорили, нам необходимо для этого нанести надпись на фото. Для этого, открываем вкладку меню "Text" (Cм.фото ниже)

 

11. Появляется окно-меню , ставим мышкой галочку включения команд данного меню в окне"Add Text" и отрываются команды меню и поля заполнения и контроля за надписями. (См.фото ниже)

12. Если мы в этом меню нажмем клавишу команды по установке и настройке шрифтов "Font" , то мы сможем проэксперементировать и установить красивый шрифт. (См.фото ниже)

13. Когда мы пишем текст надписи, одновременно внизу на синем поле, изображающем поле будущего фото, появляется надпись для визуального контроля. Но , кроме этого, мы нажав внизу на пиктограмму с "лупой" можем посмотреть как надпись легла на конкретное наше фото (См.фото ниже)

 

14. Смотрите как это выглядит в программе (См.фото ниже) Если нас все устраивает, закрываем окно просмотра и нажимаем "ОК"

 

15. И последнее, что нам осталось, нанести красивые рамки на фото и тень. Для этого открываем новую вкладку меню "Border" и ставим галочку в окно Appy Border Effects" вызова команд данного меню. (См.фото ниже)

 

16. Открываем данное меню, ставим, как и в предыдущих вкладках, гапочку в окно "Appy Border Effects для вызова команд меню. Внизу картинка пейзажа - условное фото, на нем будут отображаться все наши "эсперементы" с рамочками и эффектами теней. (См.фото ниже)

 

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

 

18. Визуально мы увидели , что при установке рамочек , надписи стали некрасиво ложится на фото, попали на тень.(См.фото ниже)

 

19 В таком случае, мы возвращаемся в меню текста, нажимаем вкладку "Text", для корректировки расположения надписи на фото. (См.фото ниже)

 

20. Смотрим фото внизу , там описано как можно двигать надписи по полю фото. (См.фото ниже)

 

21. После корректировки расположения надписи, надпись можно так же уменьшить или увеличить по размеру, при визуальном просмотре фото нас все удовлетворяет. (См.фото ниже)

 

22 Так же можно посмотреть все другие фото обрабатываемого каталога. (См.фото ниже)

 

23. В меню "Text" можно двигать расположение надписи на фото командно , в окошке "Position" устанавливаем нужны нам режим, на фото внизу установлен режим "Buttom-Center" (расположение внизу - центр). Соответственно и на синем условном поле фото надпись встала "внизу и в центре". (См.фото ниже) Можно расположение надписи подкорректировать ,вручную. На синем поле условного фото левой клавишей мыши заэимаем напись, и не отпуская двигаем надпись, через пиктограмму просмотра смотрим как она легла на фото. Если нас все устраивает жмем "ОК" (См.фото ниже)

 

24. Возвращаемся в основное меню и нажимаем команду начала конвертации фотографий, для этого нажимаем кнопку "Convert" (См.фото ниже)

 

25. Открывается окно конвертации программы "Image Convert" , где мы наглядно видим процесс конвертации фотографий. (См.фото ниже)

 

 

26. Результат конвертации, после её окончания, будет виден в окне так: . Для завершения процесса , нам остается только нажать копку "Done" (См.фото ниже)

 

27. Открываем наш каталог - приемник и смотрив наши фото, уже сконвертированные. (См.фото ниже)

 

28. Дважды нажимаем левой клавишей мыши по файлу фото и сморим результат. Сконвертированные фото имеют уменьшенный размер для публикации в интернете, рамку и тень и зашитную надпись . Все, первый этап подготовки фото к публикации в интернете нами сделан. (См.фото ниже)

 

II . Второй этап - создание web - фотогалереи.

 

И так, у нас есть каталог- приемник, в котором лежат наши подготовленные к публикации фотографии. Для этого используем программу "Gallery Wizard" о которой упоминалось в начале статьи. Агоритм работы данной программы предельно прост. Делается захват каталога с фото в программу, производятся настройка меню будущей галереи, настроки выходных файлов и дается команда на конвертацию, программа автоматически создаст web-галерею. Почему хотелось остановиться в работе по созданию web-галереи именно на этой программе ? В этой программе авторами заложена одна "изюминка", в настройке выходных файлов, если у Вас есть хоть какие-то знания языка разметки HTML, т Вы сможете выставить "ТЭГ"и в разделе НЕАD какие хотите, можете скорректировать механизм листания фото , скоректировать переходы с галереи на Главную сайта или вообще на Вашу какую-то страницу, можно менять расположение кнопок листания, можете описать какой-то объект (банер, счетчик, логотип) и он будет отражаться на каждой странице Вашй фото-галереи. И наконец, самое главное, в этой программе Вы сможете вносить текст к фотографиям. В общем большой респект авторам данной программы !!! Прога бесплатная, но на мой взгляд даст 100 очков вперед любой платной прграмме, тем что в ней заложен элемент творчества.

1. Так выuлядит иконка программы на рабочем столе . Делаем клик мышкой по данной пиктограмме программы.

 

2. Открывается рабочее окно программы . Ввержу программы вкладки настройки нашей будущей web-галереи. Слева, ниже, окно захвата каталога фотографий из которых генерируется галерея. Окно заполнено , так как на программе раньше работали. Кстати, это очень удобно, так как, программа обладает большими возможностями по настройке вида выходной галереи, то можно еще раз сгенерировать галерею и поробовать это сделать несколько раз, с получением разных вариантов галереи. (См.фото ниже)

 

 

3. Убираем следы предыдущей работы, очищаем окно программы. Для этого жмем кнопку "Clear All". (См.фото ниже)

 

 

4. Так выглядит рабочее окно программы , очищенное.(См.фото ниже)

 

 

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

 

 

6. Осуществляется обычный поиск каталога, как в любой win оболочке, выбирается каталог с фото и жмем "ОК" (См.фото ниже)

 

 

7. Остановимся на командах : Кроме команды "Add directory" , в меню есть команда "Add File(s)" - загрузка файла или файлов в программу. Эта команда позволяет загружать фотографии не всего какого-то каталога , в выборочно по-одному или группами, что на практике зачастую и делается. Имеется команда "Sort" для сортировки фотографии , имеет два режима Один режим Sort by Filеname - сортировка по наименованию файла. Очень важная сортировка. Мы знаем что файлы фотографий на цифровых фотоаппаратах номеруются фотоаппаратом автоматически. А нам, допустим, галерею надо создать с определённым порядком . Мы с Вами в таком случае пререименовываем файлы наших фото, как нам надо, т.е. в том порядке как мы хотим их видеть в фотогалереи. Например, присваиваем им названия foto_a1, foto_a2,foto_a3, foto_a4, и т.д., foto_b1,foto_b2,foto_b3,foto_b4,foto_b5 и так далее. После переименования файлов фото, мы загрузив их в данную программу нажимаем команду Sort by Filеname и фото встают web- галерею в том порядке в каком мы присвоили им номера. Со вторым режимом сортировке , предлагаю разобраться самим, чесно говоря автор данной статьи так не понял как работает второй режим сортировки.(См.фото ниже)

 

 

8. Заходим в подменю настройки меню будующей web - галереи , вкладка "Thumbnail Options" Настраиваем вид аваторок (уменьшенных фото) которые будут в меню web - галереи, настраиваем изменение названий перекодируемых файлов фото. (См.фото ниже)

 

 

9. Далее , входим в подменю настройки входных файлов, вкладка "Input Options" Ставим галочку в окне "JPEG" и устанавливаем степень сжатия фото 100, в окне "Compression QuaLity". (См.фото ниже)

 

 

10. Переходим в подменю выходных настроек, вкладка "Output Options" и настраиваем следующие параметры :

a) Указываем каталог куда будет выгружена сгенерированная web-галерея, в нашем случае указан путь к каталогу : G:\КОНТЕНТ\FOTOVIDEO\foto web\FotoGaler

b) выбираем стиль будущей галереи , в программе несколько стилей, указываем количество колонок и строк в меню , в нашем случае указано 6 колонок и 3 строки.

c) Указываем запускаемый файл - index

d) Уазываем название страниц файлов галереи, т.е. то что будет стоять в тэге Title выходных страниц HTML

i) Указываем каталог на сайте в котором будет находится наша web галерея, на фото указан каталог по предшествующей галереи "http://pgs1958.net/FOTOVIDEO"

(См.фото ниже)

 

 

11. Переходим в меню настройки страницы каждой фотографии , "кликаем" по вкладке программы Image Page (страница фото) В зависимости от того включаем мы или нет режим создания HTML страницы для каждого фото у нас на выходе можно получить галлерею двух видов. Без создания HTML страницы web- галерея получается упрощенного типа, в варианте создания HTML страниц открывается полная свобода творчества в данной программе по оформлению и по установке команд листания и установке линек. Для сравнения обоих методов попробуем , сначала, простой метод - без создания HTML страниц. (См.фото ниже)

 

 

12 Убираем галочку в окне "Greate a HTML for every image" , и нажимаем "ОК" для генерации фотогалереи.(См.фото ниже)

 

 

13. Сгенерированная галерея смотрится в интернета так.. При этом вид у галерее мягко говоря "не фонтан" . Нет меню, нет логотипа сайта, нет названия web - галереи. Открывается фото путем нажатия на аваторку в меню (См.фото ниже)

 

 

14. В этом случае мы сможем подправить вид галереи програмой Macromedia Dreamweaver 8 , загрузим файл index1.htm в эту программу и добавим код логотипа сайта и названия галереи. (См.фото ниже)

 

 

15. В этой же программе - Macromedia Dreamweaver 8 вставим в файл index1.htm код линьки возврата из галереи на Главную страницу сайта. (См.фото ниже)

 

 

16. Сохраняем измененный файл управления галереей index1.htm. (См.фото ниже)

 

 

17. Снова смотрим что получилось. Сечас вид меню галлереи весьма приличный. (См.фото ниже)

 

 

18. Так будет выглядеть каждое фото галереи при нажатии аваторки в меню галереи. Но возврат из просмотра фото на страницу меню очень неудобный. (См.фото ниже)

Для просмотра созданной в этом варианте галереи жмите ссылку Галерея вариант N 1

 

19. Теперь расмотрим другой вариант генерации фотогалереи в программе "Gallery Wizard". Установим в окошке "Greate a HTML Page for every image" вкладки "Image Page" .галочку То есть даём команду программе создавать HTML страницы для каждого фото галереи. (См.фото ниже)

Примечание: для прочтения остальной статьи необходимо знание основ языка разметки "HTML" ! ! !

На фотографии описаны блоки кода страницы HTML которая будет программой генерироваться для каждой фотографии web-галереи.. Тэги раздела HEAD описаны как пример, т.е написан обязательный минимум тэгов , но их можно значительно улучшить. На фото начало раздела HEAD. (См.фото ниже) Продолжение описание кода страницы смотрим на следующем фото.