金曜日, 5月 31, 2024

Illustratorのクリッピングマスクはアピアランスと友達

線の指定を指定折る図形にキャラクターなどをクリッピングマシクスルト線幅が邪魔になってしまいますが、アピアランスで逃げ切ることが出来ます。

上はサンプルとっして用意したデータです。

レイヤー構造。

ブルーのオブジェクトの複製をキャラクターの上にコピーし、そのコピーとキャラクターを選択します。

画面上では上の様な状態です。

ここで［オブジェクト］＞［クリッピングマスク］＞［作成］　を実行すると、レイヤー構造は上の様になり・・・

クリッピングマスクが行われますがブルーオブジェクトの線幅が半分しか表示されません。昔は塗り無しのオブジェクトのコピーを一番上に配置したりしました。

取りあえず正確なサイズで作成していなければ線幅を外側描写に変更すれば・・・

問題は解決ですが、全体のサイズが変わってしまいます。

そこでクリッピングパスを選択してから［ウインドウ］＞［アピアランス］を開き・・・


線の色と太さを設定します。



続けてグラデーションの塗りも指定します。

ちなみに、グラデーションの角度などはベースのグラデーションの設定誌をメモして入れます。

コレで余計な形状を追加することなく線幅を生かすことが出来ます。

上は最終的なレイヤーの構造です。
投稿者 時刻:
ラベル:

TCDW8054　
かなりシュールな瞬間・・・いやホラーですね

数日前、地下鉄のホームで発車間近の電車に飛び乗ろうと松葉杖を抱えて全力疾走している人を見ました。かなりシュールな瞬間・・・いやホラーですね。
投稿者 時刻:
ラベル: , ,

木曜日, 5月 30, 2024

Wordで同サイズの画像を効率よく複数配置

質問がありましたので・・・
Wordで同じサイズの画像を複数配置する場合の効率よい対処方法を整理しました。

まず［挿入］＞［画像］＞［このデバイスから］で配置したい画像を選択すると・・・

本文エリア目一杯に指定した画像が読み込まれるので、対角線のポイントを摘まんでサイズ調整します。また、レイアウトオプシンで配置設定を調整します。

サイズに関しては［図形の書式］＞［サイズ］にて数値指定ッすることも出来ます。ただし作例のように高さ80mm、幅60mmと指定しても高さ79.99mm、幅59.99mmと微妙にズレることがありますが、誤差の範囲です。また読み込んだ画像は画像の比率を保ったまま数値が連動しますが、図形の場合は比率は固定されません。

画像が1点であればこれで完了ですが、同じサイズの画像を複数配置したい場合は、この面倒な処理を繰り返さなければなりません。

そこで配置したい画像の最終サイスと同じ四角形を作図します。

作図後に［図形の作図］＞［図形の枠線］＞［枠線なし］とします。

後は［control shiftキー］※を併用して四角形をドラッグして複製を作成します。続けて四角形を右クリックして表示されたパレットから［図形の書式設定］を選び、右端に図形の書式設定パレットを表示させます。

※macOSの場合は［option shiftキー］

ここで［塗りつぶし］＞［塗りつぶし（図またはテクスチャ）］を選択すると、デフォルトのテクスチャーが自動配置しますが、気にせず［画像ソース］＞［挿入する］にて配置したい画像を選択します。

これで求めるサイズの画像が配置されます。ちなみに、この手順で配置した画像は透明度を調整することが出来ます。

同様に次の四角形を選択して［塗りつぶし］＞［塗りつぶし（図またはテクスチャ）］を選択すると、先ほど配置した画像が貼り込まれますが、コレは直前の配置画像が自動的に指定される仕様なので気にする必要はありません。

気にせず［画像ソース］＞［挿入する］にて配置したい画像を選択すればOKです。勿論既に配置した画像のコピーを作成して繰り返せば同じサイズの画像を複数配置できます。なお、配置する画像のピクセルの比率が揃っていることが重要です。Photoshopを持って居なければPhotopeaで処理で来ます。

Photopea Basic Operation 03　画像サイズと解像度の変更手順 2024/05/02
投稿者 時刻:
ラベル: ,

TCDW8053　
こんな時はスイーツを爆喰いかな〜

チョット不快な事が続いて疲れ気味。まっ些細なことなんだけれど「いい歳してよくやるよな〜恥ずかしくないの?」的な展開とでも言う感じ。こんな時はスイーツを爆喰いかな〜。食べ過ぎに注意ですね（^o^）
投稿者 時刻:
ラベル: , ,

水曜日, 5月 29, 2024

How to use Trangram 15　
ペアレンティングでボブルヘッド風動作

質問がありましたので・・・
ペアレンティングでボブルヘッド風の動作を演出してみました。

Trangram
https://www.trangram.com/

この連載は以下で確認できます。

まずパーツを整理して作成します。名称をしっかり設定しないとワケワカメになるので要注意です。パーツの構造は・・・

flower（花）
right_leaf（右_葉）
left_leaf（左_葉）
>face（顔）
>right_eye（右目）
black（黒）
white（白）
>left_eye（左目）
black（黒）
white（白）
mouth（口）
petal2（花びら2）
petal1（花びら1）
calyx（萼）
stalk1（茎1）
stalk2（茎2）
stalk3（茎3）
stalk4（茎4）

ペアレンティング設定で中心点を今回は下に作成しました。上図で言うと顔を一番上になるからです。

ここでペアレンティング設定を行います。
ペアレンティング設定については以下を確認してください。

How to use Trangram 07　Parenting／ペアレンティング 2024/04/10

次ぎにパーツ全体を選択してから1秒、2秒、3秒、4秒の位置にコピーします。alt（option）キーを併用してドラッグすればコピーを作成出来ます。

コピーを完了した状態です。

ここで1秒に位置で花と茎を選択しcontrol（commnad）キーを併用して回転させます。

同様にして3秒に位置で花と茎を選択し、control（commnad）キーを併用して回転させます。これで設定は完了です。
 
※なお、この書き込み時点ではWebpで書き出して再生されました。しかし、2024/05/23の段階では、Webpで書き出したモノはムービーとはならず制止画になり、Webp形式でのムービー書き出しはWebm（VP9）を指定します。ただし、ブラウザーでは表示で来ますが、このBlogに配置できませんでした。そのため、上のムービーはGif書き出ししたモノを配置しています。
投稿者 時刻:
ラベル: ,

TCDW8052　
里芋、馬鈴薯、蓮根は根ではなて茎なんですよね〜

ジャガイモ星人？なんているわけないよね〜。私は芋類が大好きです。いや根菜と言うべきかも。里芋、山芋、馬鈴薯、薩摩芋、人参、大根、牛蒡、蕪、蓮根。でも里芋、馬鈴薯、蓮根は根ではなて茎なんですよね〜。
投稿者 時刻:
ラベル: , , , ,

火曜日, 5月 28, 2024

HTMLとCSSの様々な表現 11　
HTMLとCSSだけでプルダウンでページを切り替える

プルダウンでページを切り替える流れをHTMLとCSSだけで整理してみました。今回は前回のJavaScript仕様版をベースにイラストで選択するインターフェースを整理しました。

前回の内容

page_01.html〜page_03.htmlは前回と全く同じです。

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Dropdown Menu Redirect</title>
<style>
/* スタイル（css）設定 */
* {
margin: 0px;
padding: 0px;
}
div#mainbox {
width: 100px;
height: 50px;
margin: 50px auto;
text-align: center;
background-color: forestgreen;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: aquamarine;
min-width: 100px;
z-index: 1;
}
.dropdown-content img {
width: 100%;
height: auto;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body bgcolor="aquamarine">
<div id="mainbox">
<div class="dropdown">
<img src="links/menu.png" alt="fish picture menu">
<div class="dropdown-content">
<img src="links/fish_01s.png" alt="fish 01 picture"
onclick="redirectToPage('page_01.html')">
<img src="links/fish_02s.png" alt="fish 02 picture"
onclick="redirectToPage('page_02.html')">
<img src="links/fish_03s.png" alt="fish 03 picture"
onclick="redirectToPage('page_03.html')">
<!--
.dropdownクラスが親要素で画像とプルダウンメニューを含む。
.dropdown-contentクラスはプルダウンメニューのコンテンツを表し、
デフォルトでは非表示だが.dropdown要素にマウスを重ねると、
プルダウンメニューが表示される
-->
</div>
</div>
<script>
function redirectToPage(url) {
window.location.href = url;
}
</script>
</body>
</html>
<!-- index.html -->
 
<!-- page_01.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Blue Fish Image</title>
<style>
* {
margin: 0px;
padding: 0px;
}
a:link {
color: white;
}
a:visited {
color: white;
}
div#mainbox {
width: 800px;
height: 600px;
margin: 0px auto;
}
</style>
</head>
<body bgcolor="crimson">
<div id="mainbox">
<div class="container">
<img src="links/fish_01.png" alt="Blue Fish Image">
<a href="index.html">Go to Top Page</a>
</div>
</div>
</body>
</html>
<!-- page_01.html -->

<!-- page_02.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Yellow Fish Image</title>
<style>
* {
margin: 0px;
padding: 0px;
}
a:link {
color: white;
}
a:visited {
color: white;
}
div#mainbox {
width: 800px;
height: 600px;
margin: 0px auto;
}
</style>
</head>
<body bgcolor="mediumblue">
<div id="mainbox">
<div class="container">
<img src="links/fish_02.png" alt="Yellow Fish Image">
<a href="index.html">Go to Top Page</a>
</div>
</div>
</body>
</html>
<!-- page_02.html -->

<!-- page_03.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Green Fish Image</title>
<style>
* {
margin: 0px;
padding: 0px;
}
a:link {
color: white;
}
a:visited {
color: white;
}
div#mainbox {
width: 800px;
height: 600px;
margin: 0px auto;
}
</style>
</head>
<body bgcolor="darkorange">
<div id="mainbox">
<div class="container">
<img src="links/fish_03.png" alt="Green Fish Image">
<a href="index.html">Go to Top Page</a>
</div>
</div>
</body>
</html>
<!-- page_03.html -->

トップページ
［SELECT FISH］をクリックするとイラスト一覧が表示されます。

Blue Fish Page

Yellow Fish Page

Green Fish Page
投稿者 時刻:
ラベル: , ,

TCDW8051　
Windows10からアプデートしたマシンの違和感が

なんとなくWindows11環境に違和感が・・・。元々Windows11で購入したマシンでは感じないのですが、Windows10からアプデートしたマシンの違和感が・・・。祟り？かな。いや、何の祟り？
投稿者 時刻:
ラベル: , ,

月曜日, 5月 27, 2024

How to use Trangram 14　
パス操作の基本と作り込み

質問がありましたので・・・
前回の背景イメージの作成を整理しました。パスツールでの処理なのでIllustratorなど他のツールでも同様の処理です。

Trangram
https://www.trangram.com/

この連載は以下で確認できます。

作業は上図の←部分をクリックして［Layer Mode］と［Path Mode］を切り替えながら行います。まず四角形を作図します。作図は［Layer Mode］と［Path Mode］のどちらでもOKです。

続けて［Layer Mode］としてから作成した四角形をalt（option）キーを併用してドラッグすることでコピーを作成します。コピーした四角形に色を適宜変更しておきます。

次ぎに垂直方向のサイズ調整します。



更に上図ように位置調整を行います。ここで［Path Mode］に切り替え上から2つ目のツール（Vector Tool）を選択し、パス上の任意の位置をクリックしてポイントを追加します。



ここで［Path Mode］に切り替え上から2つ目のツール（Vector Tool）を選択し、追加したポイントををalt（option）キーを併用してドラッグするとハンドルが引き延ばされるので、塩のママ右下に引っ張ると上図のように形状が変化します。

次ぎにalt（option）キーを併用してドラッグすることでコピーを作成し、サイズと色を適宜変更しておきます。



後は形状のハンドルを動かして形状を変更・・・



ポイント移動やハンドル調整で2つの形状の関係を適宜調整します。

最後に線幅を0に変更すれば結果として無しとなるので完成です。
投稿者 時刻:
ラベル: ,
登録: 投稿 (Atom)