Как сделать такую картинку?

Тема в разделе "Веб-дизайн", создана пользователем Хомячок, 20 янв 2011.

Модераторы: zek24
  1. Хомячок

    Хомячок

    Регистр.:
    10 апр 2008
    Сообщения:
    184
    Симпатии:
    103
    Привет всем! Делаю сайт, а в шаблоне обнаружил вот такие картинки (в приложении).

    Можете подсказать, как сделать такой эффект для любой другой картинки, чтобы можно было просто взять любую картинку и наложить на нее картнку с таким эффектом) Можно даже без надписи с названием фильма. Заранее спасибо!)))
     

    Вложения:

    • 5.png
      5.png
      Размер файла:
      62,2 КБ
      Просмотров:
      26
    • 1.png
      1.png
      Размер файла:
      52,8 КБ
      Просмотров:
      22
    • 7.png
      7.png
      Размер файла:
      50,9 КБ
      Просмотров:
      20
    krast90 нравится это.
  2. UDAV

    UDAV

    Регистр.:
    22 июн 2007
    Сообщения:
    776
    Симпатии:
    153
    В фотошопе включаешь запись и создаешь один раз такой эффект, потом для любой картинки включаешь записанное и фотошоп еще раз повторяет твои действия -)
     
  3. evraya

    evraya Читатель

    Заблокирован
    Регистр.:
    3 авг 2010
    Сообщения:
    250
    Симпатии:
    296
    Bevel and Embosses, а закругление краев ищите в гугле мануал, уроков подобных очень много.

    Добавлено через 1 минуту
    А вообще есть еще .js библиотека для работы векторной. То есть даете ей картинку, а она уже отображает как настроите, тоже весьма удобно.
    Вот скажем что-то такое:

    http://code.google.com/p/ictinus/
     
    Хомячок нравится это.
  4. Хомячок

    Хомячок

    Регистр.:
    10 апр 2008
    Сообщения:
    184
    Симпатии:
    103
    Я может не так выразился, но самый главный вопрос как создать такой эффект на картинке, а как вывести я уже придумаю!
     
    krast90 нравится это.
  5. Kub

    Kub

    Регистр.:
    5 июн 2009
    Сообщения:
    626
    Симпатии:
    485
    Возможно здесь можно пойти таким путём, сделать в Photoshop маску с таким эфектом и полупрозрачной чёрной полоской, а затем уже накрывать ей любое изображение. Так легче потом будет менять изображения если в этом будет необходимость. А надписи на полупрозрачных полосках уже потом дописывать или скриптом как то придумать их туда выводить.
     
  6. barbakan

    barbakan

    Регистр.:
    18 авг 2007
    Сообщения:
    345
    Симпатии:
    399
    Все гениальное просто, если я правильно понял, тут реч о закруглении краев? или что то другое а то привьюшки слишком мелкие невижу что там за эфект на картинку наложен.

    http://demiart.ru/forum/index.php?showtopic=42990
    а потом как сказали раньше, включаеш запись и создаеш эффект.
     
    Хомячок нравится это.
  7. Хомячок

    Хомячок

    Регистр.:
    10 апр 2008
    Сообщения:
    184
    Симпатии:
    103
    Просто я в нете нашел шаблон с уже готовыми картинками, psd исходника у меня нету и как превратить обычные картинки в такие я не знаю. На сайте это выглядеть будет как в приложенной картинке. Там как бы эффект экрана телевизора со скругленными краями и с подсветкой сверху. Вокруг изображения рамочка с тенью. Исходные картинки выложены в первом сообщении. Я хочу в последствии написать скрипт, который будет обрезать картинку из новости, накладывать этот экран с подсветкой и выводить как на скрине ниже.
     

    Вложения:

    • scr.png
      scr.png
      Размер файла:
      426,5 КБ
      Просмотров:
      21
    krast90 нравится это.
  8. ИрИваныч

    ИрИваныч Создатель

    Регистр.:
    17 май 2010
    Сообщения:
    17
    Симпатии:
    0
    Все просто: В блок кладешь картинку, а поверх него - еще один блок, в котором у тебя цссом прописан фон с рамкой и тенью и с дыркой посередине (то есть фон должен быть сделан png-файлом). Вот и все. А потом нижние картинки меняй сколько хочешь.
     
  9. Хомячок

    Хомячок

    Регистр.:
    10 апр 2008
    Сообщения:
    184
    Симпатии:
    103
    Хорошо, с Bevel and Embosses все вроде понятно, удалось создать что-то подобное, только рамку не удается воссоздать. А как можно сделать такую подсветку сверху? (Скрины в предыдущих сообщениях)
     
    krast90 нравится это.
  10. evraya

    evraya Читатель

    Заблокирован
    Регистр.:
    3 авг 2010
    Сообщения:
    250
    Симпатии:
    296
    Подсветку смотрите в сторону градиента, масок и каналов. Там полупрозрачности. А можно вырезать ее из исходников и накладывать как бэкграунд дива допустим идущего на слой выше.

    Если такое вот динамично создавать, то вот еще:

    Библиотека создания скругленных уголков

    Демо



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


    Далее, еще можно изучить:

    Универсальный метод скругленных уголков
    Но только взять свою маску.


    Как пример там приведена обводка в виде книги.
     
    Хомячок нравится это.