タグ

2013年12月18日のブックマーク (11件)

  • [IE7|IE8] jQueryのfadeIn/fadeOutした時にpng画像が変になる時のTips - Web 業界の技術屋 | VIVID Labs.

    悪名高き IE6 がついに Yahoo さんからも干されてデベロッパー歓喜!となってから、それなりに時間が過ぎましたね。 あなたの会社では IE6 のサポート状況は如何なものでしょう?当社では Yahoo さんもこうしていますよ、せめて IE7 にしましょ?ね?ね?と言う地道な活動を続けて、それなりに効果が出ています。 実際 IE6 をサポートしなければ CSS がシンプルに書けたり、png のアルファチャンネルをプラグイン無しで描画出来…で、き… 出来てないじゃん! と言う訳で今回は IE7 と IE8 で再現を確認したアルファチャンネルの描画バグをフィックスします、症状は下記のような感じ。 普通に img 要素で描画する分には問題無い 既に描画されている要素の opacity を弄るとアルファチャンネル部分が黒くなる 普通にサイトを作っていて、png ファイルの要素の opacity

  • SpinKit

    .spinner { width: 40px; height: 40px; background-color: #333; margin: 100px auto; -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes sk-rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg

    SpinKit
  • 知ってると超便利!効率的なSEOに役立つGoogle Chrome拡張機能まとめ19選 | nanapi [ナナピ]

    はじめに Webサービスのマーケティングで欠かせないSEO。Web担当者やマーケターの方は、自社のサービスがユーザーに見つけてもらえるように、日々改善を行っているかと思います。 あらゆる観点での調査や分析などが必要なSEOにとって、効率よく調べるための工夫をすることは、大きな成果につなげるために大事なことだったりします。 ここではそんなSEOの業務の効率化や、成果の最適化に活きるGoogle Chrome拡張機能をまとめてみました。ぜひ一度使ってみてください! SEO向けGoogle Chrome拡張まとめ SEO Site Tools SEOのあらゆる要素をみることができる便利拡張。被リンク数やページランク、ソーシャルサイトの反応やサーバ・ドメインの情報などSEOに役立つ情報が見れます。 SEO Site Tools On-Page / External metrics, Social

    知ってると超便利!効率的なSEOに役立つGoogle Chrome拡張機能まとめ19選 | nanapi [ナナピ]
  • Photoshopのシェイプでできること。

    PhotoshopをWebデザイン制作として使ってると、画像を編集する事よりも、シェイプを使って図形を描く事の方が多い気がします。Illustratorで描くのと違って、ピクセル具合も気にしながら描けるので、小さいアイコンなんかはPhotoshop上で作った方がきれいに描けたりします。それでいてパスなので、拡大しても劣化しないし、ダブルクリックでカンタンに色を変えられるし、もちろんIllustratorでも使い回せるし、いろいろ重宝ポイントがあるんです。 そんな万能シェイプの機能や特長について、個人的なまとめです。 ※この記事では、主にPhotoshop CS4を使っていますが、Photoshop CS6との違いも、分かる範囲で注釈入れてます。 ※OSはMac OS X 10.6 Snow Leopardを使ってますが、Mac OS X 10.8 Mountain Lionとの違いも、分か

    Photoshopのシェイプでできること。
  • 【Phototshop小技】境界をぼやけさせずに綺麗に長方形シェイプを描く方法

    こんにちは、井畑です。 前回書いた記事が割りと好評だったので、調子に乗って第2弾。 Photoshopのシェイプを使って、長方形などの図形を描くと、どうしてもシェイプの端がぼやけるというか、汚く表示されてしまいますよね。 実は、これを簡単にきれいに書く方法があるんです! 簡単な設定ですが、意外と僕の周りで知らない人が多かったので紹介してみました。 それではどうぞ! ※環境はPhotoshopCS5です。それ以下のバージョンでも多分出来ると思いますが・・・なにぶん未確認ですのでご了承ください シェイプの端が汚くなる理由 理由はただひとつ。ピクセルのすき間でなく上にパスが描かれてしまうからです。 ガイドを使わず適当にシェイプを描いた場合、パスが綺麗にピクセルとピクセルの間を通らないので、シェイプの端がぼやけて、汚く表示されてしまいます。 運よく、ピクセルに沿って描かれた場合はもちろんきれいに表

    【Phototshop小技】境界をぼやけさせずに綺麗に長方形シェイプを描く方法
  • Illustratorでピクセル単位の作業を奇麗に行うための方法(イラレのピクセルずれ問題) - フリーでWebデザインとかやってる紳士。

    2017年の追記(CC2017向け) 次の点に留意して作業すればOK。基的にイラレのピクセル周りの扱いはモリモリ改善されているのでだいぶ楽になった。 次セクション「2016年の追記」との違いだけを列挙する。 変形パネルの「ピクセルグリッドに整合」と「新規オブジェクトをピクセルグリッドに整合」が廃止され、あらたに「コントロール」バーの一番右に「ピクセルのスナップオプション」が追加された。これをオンにする。またその中の詳細項目にも全部チェックをつけておく。 それでも作業中に何かのはずみであるオブジェクトが整数ピクセルじゃない状態になったら、「ピクセルのスナップオプション」の隣にある「選択したアートをピクセルグリッドに整合」ボタンをポチして位置調整する。私は今までコントロールバーは邪魔なので非表示にしていたが今はこのボタンのためだけに表示している(スクリプトでなんとかなりそうな気もするが調べて

    Illustratorでピクセル単位の作業を奇麗に行うための方法(イラレのピクセルずれ問題) - フリーでWebデザインとかやってる紳士。
  • Photoshopは、まずはこの3つのポイントをおさえなさい。Webデザイナー、WebクリエイターのためのPhotoshopのおススメ書籍 - DESIGNMAP

    私が、初めて買ったPhotoshopはいまも活躍されている高木和明さんの『FAKE IMAGE』である。書泉という屋で、あれこれ立ち読みして、悩んだ末に買った。値段も、4,000円くらいで、気軽に買うのには勇気がいる値段だった。このでアルファチャンネルを使った切り抜きや合成のテクニックを学んだ。買った当時は難解だったが、あとになって重宝した。いまだにお気に入りのひとつで、棚に置いてある。 Photoshopの奥の深さ Illustratorはペンツール(ベジェ曲線)という峠をこえれば、憶えるべきパス関連のコマンドは少ない。一通り理解すれば、それなりに、イメージする形、アイコン、ロゴ制作ができるだろう。学習しやすいソフトといえる。 それに比べて、Photoshopは大量のコマンドやパラメータ、豊富な色調補正、数多くあるマスク、アルファチャンネル、手順の多様性(同じことをやるにも、何

  • まだPhotoshopに慣れていない人のための、まず習慣にしておきたいショートカット - DESIGNMAP

    前回の「まだIllustratorに慣れていない人のための、まず習慣にしておきたいショートカット」に続いて、Photoshop編です。Illustrator編と重複しているものもありますが、のせておきます。 Macの方は、Ctrlをcommand、Altをoption、Shiftをshift、Tabをtab、Enterをreturn、Deleteをdeleteに置き換えて読んでください。 Ctrl + A すべてを選択。 Ctrl + D 選択範囲の解除。これが一番使いますね。 Ctrl + Alt + Z 複数回の作業の取り消し。ヒストリーで戻る手間が省けます。 Ctrl + : ガイドの表示、非表示 選択範囲をつくって、Ctrl + Shift + C 選択範囲内のすべてのレイヤーがコピーされます。通常のコピーは選択されているレイヤーだけがコピーされます。背景画像をスライスするときに、

  • まだIllustratorに慣れていない人のための、まず習慣にしておきたいショートカット - DESIGNMAP

    これからIllustratorを学ぶ人、まだ経験が浅い人向けのエントリーである。ショートカットはとにかく学習の初期の段階で、無理をして習慣にしておくと、作業時間を短縮できて、後々楽になる。最初はゆっくりでもよいので試してほしい。 またショートカットに加えて、『Illustrator ベジェ曲線トレーニングブック』を参考に、ペンツール(ベジェ曲線)の訓練をしつこくやっておきたい。 Macの方は、Ctrlをcommand、Altをoption、Shiftをshift、Tabをtab、Enterをreturnに置き換えて読んでほしい。 Shift + Tab ツール以外のパネルをすべて非表示にできる。一時的に、作業エリアを広くしたいときに使う。 スペース + ドラッグ 手のひらツールのショートカットキー。360度方向にスクロールができる。 スペース + Ctrl + 拡大したいエリアをドラッグ

  • イラレラボ illustrator-labo – イラレについてのシノゴノ

    Text widget These widgets are displayed because you haven't added any widgets of your own yet. You can do so at Appearance > Widgets in the WordPress settings.

  • Web制作のための、Illustratorの独学方法 - DESIGNMAP

    まずは大まかに基操作をさわっていこう。 細かい機能、コマンドなどは覚えようとせず、さっと流そう。例えば、パスファインダであれば、[合体]、[分割]、[全面オブジェクトで型抜き]だけを理解すれば、当面は十分である。ツールもすべて理解したり、覚えたりする必要はない。色の付け方、複製、グラデーション、回転、縮小・拡大、リフレクトなどベーシックな機能だけをおさえる。 一冊目として、おすすめなのは『Illustrator トレーニングブック』である。安定した内容で、これ以上分かりやすく解説するのは難しいくらいの構成になっている。