The Photoshop Etiquette ManifestoはWebデザインをする上での、Photoshopのファイルの扱い方のエチケットをまとめているサイトです。Psに限らず当たり前な管理法からちょっとしたTipsまでいろいろ。誰かに教えたい、という時にも良いかも知れない。 The Photoshop Etiquette Manifesto
The Photoshop Etiquette ManifestoはWebデザインをする上での、Photoshopのファイルの扱い方のエチケットをまとめているサイトです。Psに限らず当たり前な管理法からちょっとしたTipsまでいろいろ。誰かに教えたい、という時にも良いかも知れない。 The Photoshop Etiquette Manifesto
2013年春の新作、Illustratorのチュートリアルをvector tuts+から紹介します。 チュートリアルはステップごと詳しいキャプチャ付きで、英語が苦手な人でも雰囲気は伝わると思います。
They say a good designer is a meticulous one. “Sweat the details” and all of that. But how well does that ethos check out when we’re passing along PSDs? Take a look at a recent comp. Layers named? Original assets preserved with masks? We may be detail-oriented when it comes to prescribing layout and type, but the organization of our artwork suffers as a means to an end. Efficiency masquerades as g
最近リリースされたものを中心に、高品質なフリーのデザインフォント・タイプフェイスを紹介します。 Knubi 個人利用無料、商用利用有料。 ALEO 個人・商用利用無料。 Quant Light 個人・
TOP > WebService > デザイン制作に利用しやすい クリエイティブフリーフォントまとめ「30 New Free Fonts for Headlines」 クオリティが高くて、使いやすく、まだあまり利用されていない新しいフォントは、デザイナーの方なら誰もが使いたくなるものではないでしょうか?そんな中今回紹介するのが、デザイン制作に利用しやすい クリエイティブフリーフォントまとめ「30 New Free Fonts for Headlines」です。 Mathematical Free Font シンプルなデザインのフォントから、インパクトを与えられるフォントまで、遊び心のあるデザインフォントが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■Airbag typeface by simon stratf
こんにちは、デザイナーのサリーです。 JSを書けない私が、いろいろとパララックスのJSを漁ってみて、一番書き方がシンプルでわかりやすそうだったのが「jarallax.js」でした。 使ってみたら簡単でいい感じでしたが、ところどころクセがあって悩んだ箇所があったので、覚え書きの意味も兼ねて、今回はjarallax.jsの使い方を解説します。 (注:スマホやタブレットでは上手く動きませんので、PCでご覧ください。詳しくはこちら「パララックスサイトをつくるときにディレクターが気をつけるべき4つのこと」をどうぞ。) jarallax.jsとは? パララックスの動きが実装できるJSです。その名の通りjQueryを使用します。 公式ページはこちら: http://www.jarallax.com/ HTML <!DOCTYPE html> <html lang="ja" dir="ltr"> <hea
Posted: 2013.04.23 / Category: WebDesign WebデザインツールとしてFireworksとPhotoshopがよく挙げられますが、私はFireworksをメインに使用しています。理由はFireworksと比べるいろいろと不便な点があったからなのですが、ちょっと調べたらいろいろと知らないだけだったのでメモしておきたいと思います。 Photoshopってキャンバスで直接選択できなくね? Fireworksは選択ツールでキャンバスでオブジェクトを直接選択できるのに、Photoshopはレイヤーから選択しないといけないから直感的じゃないですよね。いえいえ直接選択もできますよ。 左パレットから「移動ツール」を選択ます。そのままだと選択されているレイヤーを移動させるだけのツールですが、「cmd + 左クリック」することで選択することができます。 ドラッグすれば範囲
25 Best Examples of Flat UI Design Websites | The Design Inspiration FlatなUIが美しいWEBサイト25がまとまっていました。 GoogleやMicrosoftのWindows8といいフラットなデザインが流行っています。 この背景には、作り手にとっては作りやすくて、見る側には見やすく好き嫌いがなさそう、っていうところがありそうですが、フラットなデザインでも綺麗にデザインされたサイトがあってフラットなサイトを作る際に参考にできそう。 関連エントリ HTML5を使ったクールなサイトデザイン集21 モダンなサイトデザインのPhotoshopテンプレート13 Twitterエンジニアの作ったサイトデザインモック作成ツール「Stylo」
2013年4月22日 便利ツール Webサイト上でシンプルなアンケートが作成できるTypeformをご存知ですか?以前「マルチデバイス対応の【Typeform】で街頭アンケートがよりスムーズに行えそう!」という記事でも紹介しましたが、その時はまだ日本語の表示に不安な点も多々ありました。この度中の人から、フォーム部分は日本語に完全対応させ、新機能を搭載したとのご連絡をいただきましたので、改めて紹介します。 ↑私が10年以上利用している会計ソフト! 紹介用動画です。その動画でもあるように、アンケートの入力にタブレットを使う企業が増えてきたなーと実感しております。というのも先日初めて訪れた某ジムの初回登録用アンケートでも、某ファッション・ブランドの「お客様の声」アンケートでもiPadを使っていたからです。しかし、どちらもデスクトップ用Webサイトでよくあるような登録フォームで、文字も小さく、入力
TopCoat FlatなUIが美しいJSレスなUIライブラリ「TopCoat」。 デスクトップ、モバイル対応でレスポンシブ、CSSで作られたUIライブラリです。 Bootstrapよりフラットなデザインが特徴でしょうか。Bootstrapのライバルとなるような物が出てきて、それぞれよい面を取り入れていってほしいですね 関連エントリ フラットで綺麗なUIライブラリFlatUIのモバイルテーマ「FlatUI」 30以上のリッチコンポーネントが詰まったHTML5のUIライブラリ「Zebra」 Bootstrapに追加で使えるjQueryベースのUIライブラリ「w2ui」 jQuery UI をタッチイベントに対応させるライブラリ「jQuery UI Touch Punch」 BootstrapをベースとしたフリーのUIKit「Flat UI」
こんにちは、システム部、元々特別なオンリーワン 鳥よしです。 (毎回書いているドラクエ10のレベルUPネタは廃人っぷりを披露しているみたいで恥ずかしいのでやめます) 今日は、Twitterでツイートした際のコールバックを得る方法を書きます。 (今更感が凄いかもしれませんが、ネタがないので書きます。 書かせてください。) まずは準備として以下を読み込みます。 【読み込み】 <script src="//platform.twitter.com/widgets.js" type="text/javascript" charset="utf-8"></script> 次に、実際のコールバックイベントを記述していきます。 「alert(‘つぶやいたよ’);」の所に好きな処理を入れて下さい。 【JS】 <script type="text/javascript" charset="utf-8"> w
35 Free HTML5 WordPress Themes For Your Blog | Free and Useful Online Resources for Designers and Developers HTML5を使ったフリーのWordPressテーマ集35。 良い感じのテーマが集まっています。ぼちぼち今のテーマにも飽きて、もう、これからはHTML5だぜ、という方は試してみても良いかも。 関連エントリ 30以上のリッチコンポーネントが詰まったHTML5のUIライブラリ「Zebra」 HTML5を使ったクールなサイトデザイン集21 クールでアニメーションするグラフを描画できるHTML5チャートライブラリ「Chart.js」 WebCamで撮影をHTML5で実現するデモ HTML5のゲームエンジン「Quintus」 フリーでHTML5ベースのリッチな管理画面テンプレート オープ
角丸を指定できるborder-radiusで、ボーダーを落書き風にすることもできます。 色によっては、蛍光ペンや絵筆みたいにもできますね。 デモページ ※リンク切れ 実装は、こんな感じです。 HTML 要素はdivだけ、入れ子もラッパーも必要ありません。 <body> <div> This is my paragraph. Like my border? This is my paragraph. Like my border?This is my paragraph. Like my border?This is my paragraph. Like my border?This is my paragraph. Like my border? </div> </body> CSS 落書き風のボーダーを実現しているのは、border-radiusです。 スラッシュで区切ることにより、水平
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く