こんにちは。
お久しぶりです。毎度、ネタがないちまきです

暖かくなって、春もはじまったかと思いきや、寒い日が続きますね。
体調管理をしっかりしなければならないですね

さてさて、今回は、CSSとSass。
すでにある、CSSをSassになおしたいと、思いまして、
調べてみたところ、こんなサイトが！

css2scss
http://sebastianpontow.de/css2compass/



スクリーンショットは、↑ような感じ
CSSの中で、どんな色が使われているか、一覧にして把握できたりして、
何度も出てくれば、include等も作成してくれたりして、
CSSからSassに変えるには、便利な使えるツールかなと思います
CSSのリファクタリングだけでも使えますよ！

コレを紹介しておきながら、Sassになおすときは、手作業でやったほうが確実だな、と思うのですが
でも、面倒くさい単純な修正なら、こちらを使った方が早いし、正確だと思います。

では、この辺で、失礼します～

みなさんこんにちは、ひでです。

本日もPhotoshopのお勉強と考えておりましたが、
つい先程＠さんに便利サイトを教えてもらったので、
備忘録も兼ねてご紹介します。

みなさんは写真などで縦横比を保った拡大・縮小時の
サイズの計算はどうやってますか？

今まで私はPhotoshop等の画像加工ソフトを開いて、
ダミー画像を拡縮して縦 or 横サイズを取得してました。

そんな時にオススメなのか下記サイト。
「WEB上手」さんの 写真の縦横比を固定して拡大縮小値を計算するツール になります。


上記のように、元になる画像サイズと
拡縮後の横幅を入力します。


すると、自動で拡縮後の縦幅を計算してくれます！！！
その他にも「倍率」やら「アスペクト比」を自動で計算してくれて、非常に便利です。

こういう痒い所に手が届くツールって嬉しいですよね。

はじめまして、あいと申します。

梅雨で毎日じめじめとしていますね
雨で暇だな～なんて日は、自分のデザインスキルがチェックできちゃうこんなゲーム達はいかがでしょうか？


Creative games for creative designers

日本語がないのが難点ですが、文字の美しい字詰め、図形の認識など、楽しく勉強にもなりおすすめです★
以下、少しご紹介を。


Shape Type
ゆがんだアルファベットをベジェ曲線で直すゲーム。完成度が％で表示されます。


Kern Type
文字をドラッグしてカーニングを調整する、文字詰め力を確認できるゲーム。


pixact.ly
ドラッグして指定のサイズのピクセルを描く、ピクセルサイズ認識能力を確認できるサイト。

まだまだ修行中の私も楽しみながら経験をつめそうです...！
これらのゲームはコリスさんのサイトでもっと詳しく紹介されています★

それでは

最近、お仕事でCSSの背景パターンを作る機会があったので、
その時お世話になったサイトをご紹介します。

●CSS3 Patterns Gallery



すでに背景パターンが沢山用意され、
使いたいパターンをクリックすればそのCSSコードを取得することが出来ます。




正直どうやったらこんなパターンが出来るか分かりませんが、
上記であるようなチェックのパターンは、
比較的分かりやすいかもしれません。


こういうのを見ると、CSS3って本当にすごいですね。


ちなみに試行錯誤したのですが、
結局お仕事で使えるパターンはなかったので、
画像を使ってしまいました…

こんにちは。デザイナーの@です。

サイトのデザインを作る際にワンポイントとしてアイコンを置くことが良くあります。
アイコンのデザインにもよりますが、単色でドロップシャドウ…くらいのものならWebフォントにして使うことが多くなりました。

何と言ってもその魅力は、
・拡大しても綺麗なこと
・いちいち画像を修正せずに色が変えられること

マルチデバイス対応などで、端末分の画像を用意しなくても済むのは十分な魅力です


今回はつくばちゃんねるのキャラクター「つくちゃん」をWebフォントにします。


Webフォントを作るサービスは多々ありますが、行き着いたのは「IcoMoon」。
必要なアイコンだけをまとめてWebフォントにできるサービスですが、自分でSVGファイルを用意すればそのファイルをWebフォントにできます。

SVGファイルを準備

まず、SVGファイルを準備します。
サイズは16×16pxで用意しました。
Illustratorで黒だけで描いたオブジェクトを用意して、メニュー「ファイル」→「別名で保存」
ファイルの種類を「SVG」を選択して保存します。

IcoMoonでSVGファイルをWebフォントに

次にIcoMoonで「Import Icons」をクリックして用意したSVGファイルを読み込みます。
「Untitled Set」としてSVGファイルが読み込まれたらアイコンをクリックして選択、画面下にある「Font→」をクリックしてWebフォント化開始です。
その後の画面で「Preferences」なんかで設定をしたりして、「Download」をクリックすればWebフォントの完成

各ブラウザに対応したフォントファイルと、CSSファイルなどが簡単に生成されます。
できあがりはこんな感じです





色つけてドロップシャドウを